代码：
<!doctype html>
<html lang="en">
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.12.4/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<style>
.tabs {
list-style: none;
padding: 0
}
.tabs a {
text-decoration: none;
color: #000;
padding: 6px 12px;
display: inline-block;
}
.tabs>li {
float: left;
border-bottom: 1px solid #000;
}
.tabs>.active {
border: 1px solid #000;
border-bottom: 0;
}
</style>
</head>
<body>
<h1>使用属性选择器实现标签页头的切换</h1>
<ul class="tabs">
<li class="active">
<a data-toggle="tab" href="#">十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">二十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">三十元套餐</a>
</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中:查找带有data-toggle属性，且属性值为tab的所有a元素
var $as=$("[data-toggle=tab]")
//2. 绑定事件处理函数
$as.click(function(){
//3. 查找要修改的元素
//4. 修改元素
//先获得当前a的父元素，添加class active
$(this)
.parent()//当前a的父元素li
.addClass("active")
//return $(this).parent()
//再获得当前a的父元素的其余所有兄弟元素，移除class active
.siblings()
.removeClass("active")
})
</script>
</body>
</html>
1.查找触发事件的元素，并给它绑定事件处理函数
2.用jq查找当前点击元素的父级，给父元素绑定class active，同时查找父元素的兄弟元素是否有acive，进行移除。
1767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
