Nav addClass/removeClass点击

我有一个菜单，链接到同一页面上的内容，并通过jQuery淡入div的进出，完美工作。Nav addClass/removeClass点击

导航中的第一个链接有一个附加到它的类（current_page_item），我想单击导航中的任何其他链接来删除该类并将其添加到单击的链接。

到目前为止，我已经试过类似：

$(function() { 
    $("#nav-links a").click(function(){ 
     $("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item"); 
     }); 
    });

不工作。

我很新的JavaScript，所以任何帮助，将不胜感激。

谢谢！

编辑：

下面是导航HTML：

  <div id="nav-wrap"> 

       <ul class="group" id="nav-links"> 
        <li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li> 
        <li><a href="#work" class="linkclass work">WORK</a></li> 
        <li><a href="#who" class="linkclass who">WHO</a></li> 
        <li><a href="#services" class="linkclass services">SERVICES</a></li> 
        <li><a href="#contact" class="linkclass contact">CONTACT</a></li> 
       </ul> 

      </div>

编辑2：

使用下面的答案仍似乎并没有达到我想要的。也许是因为我使用的jQuery插件（魔术线）。 Link

所以基本上我想'线'留在点击下面。如果我在正确的地方加载了'current_page_item'的新页面，但是由于我正在淡入淡出DIV，我无法做到这一点。

该线条跳转回到具有'current_page_item'类的li项目。也许这个代码可以修改，以添加类到单击元素？

这是代码。

$(function() { 

     var $el, leftPos, newWidth, 
      $mainNav = $("#nav-links"); 

     $mainNav.append("<li id='magic-line'></li>"); 
     var $magicLine = $("#magic-line"); 

     $magicLine 
      .width($(".current_page_item").width()) 
      .css("left", $(".current_page_item a").position().left) 
      .data("origLeft", $magicLine.position().left) 
      .data("origWidth", $magicLine.width()); 

     $("#nav-links li a").hover(function() { 
      $el = $(this); 
      leftPos = $el.position().left; 
      newWidth = $el.parent().width(); 
      $magicLine.stop().animate({ 
       left: leftPos, 
       width: newWidth 
      }); 
     }, function() { 
      $magicLine.stop().animate({ 
       left: $magicLine.data("origLeft"), 
       width: $magicLine.data("origWidth") 
      }); 
     }); 
    });

来源

2011-10-22 malicedix

将创建一个小提琴[here]（http://jsfiddle.net），这样我们可以轻松操纵和解决您的问题。 – diEcho

我们必须看到你的HTML标记来帮助你。你可以编辑你的问题，并添加'＃nav-links'部分的HTML标记吗？ –

@kara补充说明，谢谢 – malicedix

您可以$(this)达到点击的元素，并获得它的父元素li与parent()添加current_page_item类。以下是最终的代码，你可以找到一个工作示例here。

$(function() { 
    var $el, leftPos, newWidth, 
     $mainNav = $("#nav-links"); 

    $mainNav.append("<li id='magic-line'></li>"); 
    var $magicLine = $("#magic-line"); 

    $magicLine 
     .width($(".current_page_item").width()) 
     .css("left", $(".current_page_item a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $magicLine.width()); 

    $("#nav-links li:not('#magic-line') a").hover(function() { 
     $el = $(this).parent(); 
     leftPos = $el.position().left; 
     newWidth = $el.width(); 
     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }); 
    },function() { 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth") 
     }); 
    }).click(function() { 
     $mainNav.find('li').removeClass('current_page_item'); 
     $(this).parent().addClass('current_page_item'); 
     $magicLine 
      .data("origLeft", $magicLine.position().left) 
      .data("origWidth", $magicLine.width()); 
    }); 
});

来源

2011-10-22 12:53:49

似乎它会做我需要的，但它仍然无法正常工作。如果有帮助，我在原文中添加了更多内容 – malicedix

在小提琴中完美演奏，非常感谢。出于某种原因，我的'魔术线'已停止移动，但我会研究它。谢谢！ – malicedix

不客气。 –

$(function() { 
    $("#nav-links a").click(function(){ 
     $("#nav-links li").removeClass("current_page_item").closest("ul").find("li:last a").addClass("current_page_item"); 
     }); 
    });

.find（）只发现死者的元件。你正在寻找一个你正在寻找的元素的兄弟。

来源

2011-10-22 12:49:45

似乎它会做我所需要的，但它仍然无法正常工作。如果有帮助，我在原文中添加了更多内容 – malicedix

您的＃nav-links元素为ul。你的选择器里有一个额外的ul。我编辑了我的答案，以反映修复 –

$(function() { 
    $("#nav-links a").click(function(){ 
var B = $(this); 
$("#nav-links ul li").removeClass("current_page_item"); 
B.addClass("current_page_item"); 
     }); 
    });

试试这个

来源

2011-10-22 12:57:56

也似乎会做我所需要的，但它仍然无法正常工作。如果有帮助，我在原文中添加了更多内容 – malicedix

nav-links是ul所以$("#nav-links ul li")意味着所有li小号一个ul女巫内是nav-links后代，显然有没有。你必须使用$("#nav-links li")。
正如其他人提到.find搜索所有后代，这不是你要找的。在.find之前使用.closest("ul")

希望它有帮助。

来源

2011-10-22 13:07:57

Nav addClass/removeClass点击

回答

相关问题