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點擊

回答

相關問題