jQuery实战_tab栏切换

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一样利用排他思想。
效果：