1

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

最初，我使用了一种克隆方法（感谢您的好人，jQuery replaceWith() 每个元素都带有第一个），虽然它工作得很好，但它干扰了一些其他功能（因为它从页面中删除了原始元素并替换它们）。

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

我在想这样的事情......但是一些高效且不那么丑陋的事情。下面的答案确实有效。

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');
});
4

2 回答 2

1

您可以使用 anli在其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 孩子
  • 删除任何以前的“突出显示”类
  • 获取匹配的索引兄弟
  • 删除活动的，这样我们就不会改变它
  • 添加高亮类
于 2012-09-11T04:59:10.257 回答
0

为什么不给每个 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'); 的问题；

于 2012-09-11T04:25:38.857 回答