效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
ul{
height:100px;
}
li{
margin-left:100px;
float: left;
}
a{
color: #000;
}
li.active a{
color:cornflowerblue;
}
</style>
</head>
<body>
<div class="col-md-12">
<dl class="clearfix">
<dt>国籍：</dt>
<dd>
<ul class="clearfix">
<li class="active" data-index="1"><a href="javascript:;">大陆</a></li>
<li data-index="32"><a href="javascript:;">韩国</a></li>
<li data-index="33"><a href="javascript:;">台湾</a></li>
<li data-index="34"><a href="javascript:;">日本</a></li>
<li data-index="5"><a href="javascript:;">澳门</a></li>
<li data-index="6"><a href="javascript:;">香港</a></li>
<li data-index="7"><a href="javascript:;">泰国</a></li>
</ul>
</dd>
</dl>
</div>
<div class="col-md-12">
<dl class="clearfix">
<dt>从医时间：</dt>
<dd>
<ul class="clearfix">
<li data-index="8"><a href="javascript:;">1-3年</a></li>
<li data-index="39"><a href="javascript:;">3-5年</a></li>
<li data-index="310"><a href="javascript:;">5-10年</a></li>
<li data-index="11"><a href="javascript:;">10年以上</a></li>
</ul>
</dd>
</dl>
</div>
<div class="col-md-12">
<dl class="clearfix">
<dt>职级：</dt>
<dd>
<ul class="clearfix">
<li data-index="12"><a href="javascript:;">主任医师</a></li>
<li data-index="143"><a href="javascript:;">副主任医师</a></li>
<li data-index="154"><a href="javascript:;">副教授</a></li>
<li data-index="15"><a href="javascript:;">主治医师</a></li>
<li data-index="166"><a href="javascript:;">住院医师</a></li>
<li data-index="17"><a href="javascript:;">其他</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
var Arr = [];
$("body").on("click","li",function(e){
e.stopPropagation();
var val = $(this).attr("data-index");
var index = Arr.indexOf(val)
if(index>-1){
$(this).removeClass("active");
Arr.splice(index,1)
}else{
$(this).addClass("active");
Arr.push(val)
}
})
})
</script>
另：附动态赋值li的data-index方法
//筛选之前为每一个li赋值data-index
$("li").each(function (i) {
console.log(i)
$("li").eq(i).attr("data-index",i);
})
3238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
