案例：jQuery实现tab栏切换功能

实现功能：

① 点击上部的li，当前li添加current类，其余兄弟移除类

② 点击的同时，得到当前li的索引号

③ 让下面内容区里面相应索引号的item显示，其余的item隐藏

<div class="tab_list">
    <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>商品评价（50000）</li>
        <li>售后保障</li>
        <li>手机社区</li>
    </ul>
</div>    
<div class="detail_tab_con" style="display: block;">
    <div class="item">与商品介绍的内容相对应</div>
    <div class="item">与规格与包装的内容相对应</div>
    <div class="item">与商品评价（50000）的内容相对应</div>
    <div class="item">与售后保障的内容相对应</div>
    <div class="item">与手机社区的内容相对应</div>
</div>

<script>
    $(function() {
        // 1. 点击上面的li，当前li添加current类，其余兄弟移除类
        $(".tab_list li").click(function() {
            // 链式编程操作
            $(this).addClass("current").siblings().removeClass("current");
        　　 // 2. 点击的同时，得到当前li的索引号
        　　 var index = $(this).index();
        　　 console.log(index);
        　　 // 3. 让下面内容区相应索引号的item显示，其余item隐藏
        　　 $(".tab_con .item").eq(index).show().siblings().hide();
        });
    });
</script>