Question

多个导航部分都具有相同的链接。活动部分通过活动类（.active）显示在第一个导航中。我想在随后的导航部分中突出显示相同的链接。

最初，我使用了一种克隆方法（归功于你很好的人，jQuery replaceWith() each element with the first）虽然它工作得很好，但它干扰了其他一些功能（因为它从页面中删除原始元素并替换它们）

因此，我需要找出另一种聪明的方法来检查第一部分的活动类，在后续部分中找到匹配的链接，然后应用该类。

我在想这样的东西......但是有效且不那么丑陋。 下面的答案有效。

HTML：

<nav class="postNav">
    <ul>
        <li class="active"><a href="#pageHeader">link to header</a></li>
        <li><a href="#one">link to other posts</a></li>
        <li><a href="#two">link to other posts</a></li>
        <li><a href="#three">link to other posts</a></li>
        <li><a href="#four">link to other posts</a></li>
        <li><a href="#five">link to other posts</a></li>
    </ul>
</nav>

JavaScript的：

var navs   = $('.postNav'),
    first  = navs.first(),
    active = first.find('.active a').attr('href'),
    anchrs = navs.not(first);

anchrs.find('li').removeClass('active');
anchrs.find('a[href=' + active + ']').parent().addClass('active');

更新

也许通过查看索引中的哪个孩子是活跃的？然后我不需要通过锚点过滤......

更新+最终答案

我的选择器缓存jfriend的答案版本：

var nav   = $('.postNav'),
first = nav.filter(':eq(0)'),
notF  = nav.filter(':gt(0)'),
index = first.find('.active').index();

notF.each(function(){
    $(this).find('li').removeClass('active').eq(index).addClass('active');
});

Answer 1

你可以这样做，使用li中ul的索引位置，jQuery的.index()和.eq()使这更容易：

var index = $(".postNav .active").index();
$(".postNav ul").each(function() {
    $(this).children("li").removeClass("highlight").eq(index)
        .not(".active").addClass("highlight");
});

工作演示：http://jsfiddle.net/jfriend00/dWaCn/

其工作原理如下：

查找活动元素并获取其相对于其兄弟姐妹的索引
查找所有postNav ul标记
查找每个中的所有li子女
删除之前的“突出显示”类
获取匹配索引sibling
删除活动的，以便我们不要更改它
添加突出显示类

Answer 2

为什么不为每个li元素添加一个类：

<nav class="postNav">
  <ul>
    <li class="header active"><a href="#pageHeader">link to header</a></li>
    <li class="one"><a href="#one">link to other posts</a></li>
    <li class="two"><a href="#two">link to other posts</a></li>
    <li class="three"><a href="#three">link to other posts</a></li>
    <li class="four"><a href="#four">link to other posts</a></li>
    <li class="five"><a href="#five">link to other posts</a></li>
  </ul>
</nav>

然后在你的JavaScript中：

$(function() {
    $('li').on('click', function() {
        $('.active').removeClass('active');
        $('.'+$(this).attr('class')).addClass('active');
    });
});

此jsFiddle似乎符合您的要求。我看到的问题是，如果你有多个类分配给那些li元素（除了'active'），这会导致依赖于$（this）.attr（'class'）的问题;

jQuery查找哪个子项处于活动状态并更新其他部分

2 个答案: