jQuery实现tab栏切换
HTML结构:
<ul>
<li class="active">第一栏</li>
<li>第二栏</li>
<li>第三栏</li>
<li>第四栏</li>
</ul>
<div class="content">
<div class="tab selected">我是第一栏的内容</div>
<div class="tab">我是第二栏的内容</div>
<div class="tab">我是第三栏的内容</div>
<div class="tab">我是第四栏的内容</div>
</div>
CSS:
.active{
border-bottom: 2px solid red;
}
.content .selected{
display: block;
}
//active 用来显示下划线
//selected 用来控制显示(默认都是隐藏的)
JS:
$(function(){
$("ul>li").mouseenter(function(){
//给li添加下横线
$(this).addClass('active').siblings('li').removeClass('active');
var index = $(this).index();
//显示对应的div
$('.tab').eq(index).addClass('selected').siblings('div').removeClass('selected');
})
});
和原生JS一样利用排他思想。
效果: