Question

我似乎无法弄清楚如何让我的网站导航具有当前页面的活动链接。

这是唯一适合我的代码，但是，“活动”类总是有两个链接。我只希望当前页面处于活动状态。

这是我的代码：

<script>
 function setActive() {
 aObj = document.getElementById('nav').getElementsByTagName('a');
 for(i=0;i<aObj.length;i++) { 
 if(document.location.href.indexOf(aObj[i].href)>=0) {
  aObj[i].className='active';
  }
 }
}

window.onload = setActive;
</script>

以下是我的暂存网站：http://champhero.wpengine.com

感谢您的帮助！

Answer 1

a标记href包含完整链接，因此您可以检查如下所示的相等性。

<script>
  function setActive() {
    aObj = document.getElementById('nav').getElementsByTagName('a');
    for(i=0;i<aObj.length;i++) { 
      if(document.location.href === aObj[i].href) {
        aObj[i].className='active';
      }
    }
  }

  window.onload = setActive;
</script>

主页导航链接（http://champhero.wpengine.com/）在每个页面中都会突出显示，因为它出现在所有其他链接中（http://champhero.wpengine.com/pagelink）

Answer 2

<script>
window.onload = function(){
    var anchors = document.getElementsByTagName('a');
    for (var i = 0; i < anchors.length; ++i)
        if (anchors[i].href === window.location.href) 
            anchors[i].className += ' active';
};
</script>

虽然这个片段会将类应用于所有锚点。对于你的导航栏中的那些，给他们一个特定的CSS类来挂钩然后：

<script>
window.onload = function(){
    var nav_links = document.querySelectorAll('.nav-link');
    for (var i = 0; i < nav_links.length; ++i)
        if (nav_links[i].href === window.location.href) 
            nav_links[i].className += ' active';
};
</script>

Answer 3

您正在检查indexOf。因此，网址http://champhero.wpengine.com/始终包含在http://champhero.wpengine.com/the-enemies/

等其他网址中

如果你只是检查一个相等，它应该工作：

function setActive() {
    var aObj = document.getElementById('nav').getElementsByTagName('a');
    for (var i = 0; i < aObj.length; i++) { 
        if (document.location.href == aObj[i].href) {
            aObj[i].className = 'active';
        }
    }
}

注意：您没有使用'var'声明局部变量，使它们成为全局变量并且可能在整个环境中不稳定。我在我建议的代码中改变了它。

使用javascript导航的活动链接

3 个答案: