突出顯示活動錨鏈接

我有兩個導航，彼此相鄰，他們正在使用錨鏈接，我想突出顯示活動鏈接，一旦點擊。突出顯示活動錨鏈接

我所做的是

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

和HTML是，如果你點擊第一項之一NAV它將

<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例如

感謝

來源

2014-08-27 Amir

因爲他們沒有兄弟姐妹和ID是單數。 – epascarello 2014-08-27 17:50:04

@epascarello難題，有沒有什麼辦法通過hashtag檢測url，然後突出顯示錨鏈接？ – Amir 2014-08-27 17:52:04

試試這個：

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

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

Check JSFiddle Demo

來源

2014-08-27 17:43:39 Moshtaf

此問題的唯一問題是頁面上有多個lis不在導航欄中。最好在裏面使用''.navyy li''。 – epascarello 2014-08-27 17:52:25

...每次點擊查詢DOM「li」。效率不高。 – Jason 2014-08-27 17:58:01

@epascarello和Jason：感謝您的評論，代碼已經更新和改進。 – Moshtaf 2014-08-27 18:05:45

元素是兄弟，只有當他們有相同的父，所以你只能刪除來自LI元素的高亮類ame UL父母。如果你想刪除所有的亮點，不管它們在哪裏，你可以先做。唯一的問題是，如果您在添加高亮區時進行動畫製作，那麼您應該檢查它是否已經先突出顯示。（fiddle）

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

來源

2014-08-27 17:49:29

與其他答案類似，但效率更高。 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/

來源

2014-08-27 17:50:05 Jason

突出顯示活動錨鏈接

回答

相關問題