突出顯示活動的錨鏈接

Question

我彼此之間有2個導航，它們使用錨鏈接，單擊后我要突出顯示活動鏈接。

我所做的是

$('.navyy li').click(function() {
    $(this).addClass('highlight').siblings('li').removeClass('highlight');
});

HTML是

 <div class="navyy">
<ul id="nav">
    <li><a href="#top">Introduction</a></li>
    <li><a href="#bookmark1">Usability vs Functionality</a></li>
    <li><a href="#bookmark2">99/100 Google PageSpeed!</a></li>
</ul>
<ul id="nav">
     <li><a href="#bookmark3">Gravatar Caching!</a></li>
    <li><a href="#bookmark4">Optimize Images First!</a></li>
    <li><a href="#bookmark5">Rich Snippets Boost CTR</a></li>
</ul>
    </div>

如果您單擊第一個導航中的某個項目，則jQuery似乎僅在UL上處於活動狀態，它將高亮顯示，但如果您從其他導航中選擇另一個項目，則第一個被選擇的項目將保持高亮顯示。

這是我的JSFIDDLE示例

謝謝

Answer 1

與其他答案相似，但效率更高。 jQuery不必每次單擊都查詢DOM。 在這種情況下，元素將被緩存以備將來使用。

var naavy = $(".navyy li");

naavy.click(function() {
    naavy.removeClass("highlight");
    $(this).addClass('highlight');
});

http://jsfiddle.net/hLeQy/89/

如果您不需要支持舊的瀏覽器，則無需jQuery就可以輕松實現：

var naavy = document.querySelectorAll(".navyy li");
var length = naavy.length;

for(var i=0; i<length; i++) {
    naavy[i].addEventListener("click", function() {
        highlight(this);
    });
}

function highlight(element) {
    for(var i=0; i<length; i++) {
       naavy[i].classList.remove("highlight");
    }

    element.classList.add("highlight");
}

http://jsfiddle.net/hLeQy/90/

Answer 2

嘗試這個：

var $navyyLi = $(".navyy li");

$navyyLi.click(function() {
  $navyyLi.removeClass('highlight')
  $(this).addClass('highlight');
});

查看JSFiddle演示

Answer 3

元素只有在具有相同父元素的情況下才是同級的，因此您僅從具有相同UL父元素的LI元素中刪除高亮類。 如果要刪除所有突出顯示，無論它們在哪里，都可以先刪除。 唯一的問題是，如果您要動畫添加高光，那么應該檢查一下它是否尚未高亮。 （ 小提琴 ）

$('.navyy li').click(function() {
    $('.navyy li').removeClass('highlight');
    $(this).addClass('highlight');
});