將活動類添加到菜單中的錯誤文檔對象

這裏是我的JS代碼，它將一個活動類添加到所有包含與我當前的URL匹配的href路徑的所有<a>對象的父類。將活動類添加到菜單中的錯誤文檔對象

aObj = document.getElementById('menuG').getElementsByTagName('a'); 
    for(i=0;i<aObj.length;i++) { 
     if(document.location.href.indexOf(aObj[i].href)>=0) { 
      alert("Button n°"+i+" - Value : "+document.location.href.indexOf(aObj[i].href)); 
      aObj[i].parentElement.className='active'; 
     } 
    }

我的問題是，有href="/"的第一個按鈕始終處於活動狀態。
代碼document.location.href.indexOf(aObj[i].href)總是返回0爲第一個按鈕，我不明白爲什麼。

這裏是我的html代碼：

<ul class="nav navbar-nav" id="menuG"> 
    <li><a href="/">Mes Fichiers</a></li> 
    <li><a href="historique.html">Historique</a></li> 
    <li><a href="profil.html">Profil</a></li> 
</ul>

感謝您的時間。

來源

2016-01-21 Clément Béligat

任何URL都很可能包含該第一個鏈接標記的/。如果您使用indexOf()，它會在您網站的任何頁面中找到/。因此，第一個鏈接的父母將始終得到樣式。

您可以在瀏覽器的控制檯中自行測試它。在HTTPS網站中，/的第一個匹配位於第6位（URL中的第7個字符）。 indexOf只是返回第一個匹配的位置，並且/即第一個鏈接的href將始終得到匹配。

您可以用index.html之類的東西替換第一個鏈接的href，然後強制重定向從http://example.com到http://example.com/index.html。您的另一個選擇是通過例如檢查window.location.href是否嚴格等於（===）到鏈接標記href：window.location.href === aObj[i].href來更改您檢查當前頁面的方式。

來源

2016-01-21 20:07:59

謝謝大家。我明白indexof（）如何工作。你的解決方案非常棒！謝謝！ –

沒問題，不客氣。不要忘記，現在你正在尋找一個完全匹配，所以'example.com/index'不會匹配第一個元素。如果您決定更改主頁的URL，但不更新鏈接標記（例如，如果您執行302重定向，則會發生這種情況），則會發生這種情況。 – 2016-01-21 20:21:02

將活動類添加到菜單中的錯誤文檔對象

回答

相關問題