如果 URL 包含 VALUE 添加類到鏈接 + ROOT

Question

我想根據使用 vanilla JS 的 url 添加到我的導航的活動鏈接。

我的導航是這樣的：

 <div id="navi">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
 </ul>
</div>

JS 看起來像這樣：

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.indexOf(link[i].href) != -1) {
     link[i].className='active';}
 }}
window.onload = Activelink;

效果很好，特別是因為即使訪問了博客文章，它也會向博客鏈接添加“活動”類。 唯一的問題是<a href="/">Home</a>永久獲得了分配的“活動”類。 有沒有辦法避免這種情況，以便主頁鏈接類只有在訪問主頁時才“活動”？

Answer 1

您可以使用endsWith而不是indexOf ：

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.endsWith(link[i].href)) {
     link[i].className='active';}
 }}
window.onload = Activelink;

Answer 2

首先，歡迎堆棧溢出！ 答案在一定程度上取決於您對網站的未來概念，以及您是否將擁有不在導航中的 URL。 例如，如果您在頁腳中鏈接的 /copyright 處有某種版權頁面可訪問，但在導航中沒有，那么應該突出顯示什么？ 主頁條目？ 禁止入內？ 此外，我假設 /blog 和 /contact 也可以有子頁面？ 喜歡/博客/什么？

因此，不管未來的極端情況如何，一個簡單的解決方案是反轉 for 循環並在 if 子句中添加一個中斷：（注意我將 /blog 更改為 /js，因為這是此測試片段的 URL 的一部分跑進來。）

 function activeLink() { link = document.getElementById('navi').getElementsByTagName('a'); for(i = link.length - 1; i >= 0; i--) { if(document.location.href.indexOf(link[i].href) != -1) { link[i].className='active'; break; } }} window.onload = activeLink;

 a.active{ background-color:red; }

 <div id="navi"> <ul> <li><a href="/">Home</a></li> <li><a href="/js">Blog</a></li> <li><a href="/contact">Contact</a></li> </ul> </div>

現在您的 for 循環檢查window.location.href包含/contact ，然后如果它匹配 break 將跳過循環的所有進一步執行。 否則它將搜索/blog並且只有在前兩次執行中沒有一個匹配時才會選擇/ ，因為它始終是 URL 的一部分。 希望這可以幫助！