jquery實現簡單的導航欄切換效果($(this).index)

  一個簡單的導航欄切換效果的制作,主要通過索引值和jquery的siblings()來實現

　html代碼：

<div class="container">
    <ul class="top-nav">
        <li class="nav">html</li>
        <li class="nav">css</li>
        <li class="nav">javascript</li>
    </ul>
    
    <ul class="bottom-content">
        <li class=content>html是基礎</li>
        <li style="display: none" class="content">css也是基礎</li>
        <li style="display: none" class="content">javascirpt是進階</li>
    </ul>
</div>

  css代碼(自己隨便寫的樣式，大家可以自由發揮)：

        *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        display: inline-block;
    }
    .container{
        width: 240px;

    }
    .top-nav{
        font-size: 0;
    }
    .nav{
        width: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-family: "微軟雅黑";
        text-align: center;
        cursor: pointer;
    }
    .nav:hover{
        background-color: #CC6699;
        color:#fff;
    }
    .content{
        width: 240px;
        text-align: center;
    }    

  js代碼(要記得先引入jquery哦)：

$('.nav').click(function(){
    $(this).parent().next().children().eq($(this).index()).show().siblings().hide();
 })
//通過$(this)找到點擊的DOM元素
//通過parent(),next()這些選擇器找到要實現顯示隱藏的元素的父元素
//通過children().eq($(this).index())來用索引進行控制，$(this).index()就是你點擊元素的索引，只要把元素一一對應就好了
//通過jquery的.show()方法顯示對應的元素
//通過.sibling()找到同級的兄弟元素，進行隱藏

tips:你也可以用addClass()和removeClass()給對應的元素加上一個類，實現想要的效果

  以上方法對於一般的場景應該足夠使用，如果層級關系過於復雜就不推薦使用了