案例：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>