点击同类选项出现文字

今天写一个订单页面时,要求:在多个地址中选择一个时,被选择的地址前面要有文字出现。

完成这个问题后,自己写一个简单的。


<html>
<head>
<title>wiming</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="../css/buy_now.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<style type="text/css">
p{
text-align:center;
}
.fruit-list{
margin:0 auto;
margin-top:20px;
text-align:center;
}
.fruit-list:hover{
background-color:#FF5511;
}
.mylove-list{
display:none;
}
.on .mylove-list{
display:inline;
}
</style>
<script type="text/javascript">
$(function(){
$(".fruit-list").click(function(){
$(".fruit-list").removeClass("on")
$(this).addClass("on")
})
})
</script>
</head>
<body>
<p>点你喜欢的水果?</p>
<div class="fruit-list">
<span class="mylove-list">我喜欢
</span>
<label>苹果
</label>
</div>
<div class="fruit-list">
<span class="mylove-list">我喜欢
</span>
<label>西瓜
</label>
</div>
<div class="fruit-list">
<span class="mylove-list">我喜欢
</span>
<label>芒果
</label>
</div>
<div class="fruit-list">
<span class="mylove-list">我喜欢
</span>
<label>雪梨
</label>
</div>
</body>
</html>

时间: 2024-10-14 06:39:19

点击同类选项出现文字的相关文章

点击radio后的文字选中

我们填写表单时会遇到单选项,有时只能选前面的圈圈才能选中,这种体验不是很好.所以我们需要即使点击圈圈后的文字也能选中单选项. 下面以表单最常见的男女选项举例. 第一种方法: <form action=""> <input type="radio" name="sex" value="male" id="radio1"> <label for="radio1"

点击菜单选项,右侧主体区新增子界面(Tab)的实现

今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效果是这样的,当点击左边菜单的时候,在右边的主体区会弹出相应的页面,点击多个菜单选项时,在右边依次陈列这些窗口,这些窗口之间可以相互切换,类似于浏览器的多个打开的窗口那样. 下面,先给出这种效果的图片: 然后我将详细记录实现这个效果的过程. 整体思路: 1.基础知识 这种效果的实现主要依赖于layui

android ListView 获取点击的选项

需要调用listView的setOnItemClickListener方法 重写OnItemClickListener类的onItemClick 方法,onItemClick 方法有三个参数 @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) : View : 是listViwe 的 adapter里面给他配置的 显示内容的组建,如果需要获取所点击的item的内容可以:St

如何制作点击输入框时默认文字消失的效果

为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色.自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等. 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决.下?面介绍一下几种效果的代码: 1.点击输入框选中内容的Html代码: <form id="form1"

点击单选按钮后的文字即可选定对应单选按钮

比如我想点击单选按钮后的文字就选中相应的按钮: <input type="radio" name="sex" value="1" id="men" /><label >男 </label> <input type="radio" name="sex" value="0" id="women" />&l

下拉选项绑定文字(点击文字后勾选项可以进行勾选)

通过input标签 ID属性进行传值给 label标签 for属性 进行绑定 <p> <input type="checkbox" checked="checked" id="service"> <label for="service">统一服务条款</label></p><p> <input type="submit" valu

JS 点击复制按钮 将文字复制到手机剪贴板

我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有的需要安装flash,但是这些对于手机等移动设备都不太合适,那么有没有一个简单点的办法呢? 今天,我们就来介绍一个简单实用的好方法: ①首先,我们把需要复制的部分 做成一个readonly的input, ②复制按钮的id 我这里设置成:js-copy-text, ③js如下: <script> $

点击放大图片或者文字

在鑫旭大神博客,看到这个插件的效果,觉得效果真的好好啊,佩服佩服呀. 不禁觉得大神的Css功底真的很深.再次佩服. 贴出研究过的插件源码,里面注释都是我自己琢磨的,如有不同意见欢迎探讨. jQuery.fn.fancyZoom = function(options){ var options = options || {}; //初始化参数 var directory = options && options.directory ? options.directory : 'images'

在EasyUI实现点击有子节点的文字时展开但不选中,点击最终子节点才选中的功能

最近做的项目中,总是会遇到需要实现点击树目录的有子节点时展开目录,点击最终子节点才实现选中的功能的需求.下边我就直接黏贴一下代码出来吧,非常容易看懂,关键的就是在选中事件中加一个判断. $('#RepairTID').combotree({        url: '/RepairSub/GetRepTypeZ/?userRole=5',        required: true,        panelHeight: 'auto',        onLoadSuccess: functi