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

Posted 2020-08-30 ygtq

  一个简单的导航栏切换效果的制作,主要通过索引值和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()给对应的元素加上一个类，实现想要的效果

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