jquery中.index()和.eq()

最新推荐文章于 2020-07-10 11:53:12 发布

ClerverCC

最新推荐文章于 2020-07-10 11:53:12 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/ClerverCC/article/details/54388263

版权

本文介绍如何使用jQuery实现顶部导航和侧边导航的同步效果。通过点击顶部导航中的链接，利用index()和eq()函数调整侧边导航的样式，以达到一致性的用户体验。文章包含完整的jQuery代码和HTML结构。

摘要由CSDN通过智能技术生成

css xpath规范里面只有下面三个，没有eq
:first-child
:nth-child(n)
:last-child

所以选择器里的eq,需要由jquery去解析实现，无法实现原生dom方法querySelectorAll()，所以官方也更推荐eq()函数

http://api.jquery.com/eq-selector

简单案例顶部导航和侧边导航同步效果jquery代码如下：

$(function() {
    $("a.tooltip-top-nav").click(function () {
        var number=$(this).index('a.btn.tooltip-top-nav');//index()方法中的参数要指代清楚，要不返回的是0
        $(".tooltip-side-nav").eq(number).addClass("select").parent().siblings().children().removeClass("select");
        $(".tooltip-side-nav").eq(number).removeClass("default").parent().siblings().children().addClass("default");
    })
})

$(function() {
    $(".tooltip-side-nav").click(function () {
        $(this).addClass("select").parent().siblings().children().removeClass("select");
        console.log($(".tooltip-side-nav"));
        $(this).removeClass("default").parent().siblings().children().addClass("default");

    })
});

HTML如下

顶部导航条

 <ul class="nav navbar-nav">
                    <li><a class="btn tooltip-top-nav " href="#page1">科比简介</a></li>
                    <li><a class="btn tooltip-top-nav" href="#page2">巅峰时刻</a></li>
                    <li><a class="btn tooltip-top-nav" href="#page3">职业生涯</a></li>
                    <li><a class="btn tooltip-top-nav" href="#page4">经典战靴</a></li>
                    <li><a class="btn tooltip-top-nav" href="#page5">篮球人生</a></li>
                </ul>

侧边导航

<ul class="nav-side-nav">
        <li><a class="tooltip-side-nav select one" href="#page1" title="科比简介"> </a></li>
        <li><a class="tooltip-side-nav default two" href="#page2" title="巅峰时刻"> </a></li>
        <li><a class="tooltip-side-nav default three" href="#page3"title="职业生涯"> </a></li>
        <li><a class="tooltip-side-nav default four" href="#page4" title="经典战靴"> </a></li>
        <li><a class="tooltip-side-nav default five" href="#page5" title="篮球人生"> </a></li>
    </ul>