首页 > 代码库 > jquery实现简单的导航栏切换效果($(this).index)

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()给对应的元素加上一个类,实现想要的效果

  以上方法对于一般的场景应该足够使用,如果层级关系过于复杂就不推荐使用了

jquery实现简单的导航栏切换效果($(this).index)