使用javascript进行导航时的活动链接

我似乎不知道如何使我的站点导航具有当前页面的活动链接

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

这是我的密码：

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

函数setActive（）{
aObj=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（i=0；i

感谢您的帮助！
a
tag 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>


函数setActive（）{
aObj=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（i=0；i
a
tag 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>


函数setActive（）{
aObj=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（i=0；i

window.onload=函数（）{
var archors=document.getElementsByTagName（'a'）；
对于（变量i=0；i<0.length；++i）
if（锚定[i].href==window.location.href）
锚[i]。类名+=‘活动’；
};

尽管此代码段会将该类应用于所有锚点。对于导航栏中的锚点，请为它们指定一个特定的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>


window.onload=函数（）{
var nav_links=document.queryselectoral（'.nav link'）；
对于（变量i=0；i

window.onload=函数（）{
var archors=document.getElementsByTagName（'a'）；
对于（变量i=0；i<0.length；++i）
if（锚定[i].href==window.location.href）
锚[i]。类名+=‘活动’；
};

尽管此代码段会将该类应用于所有锚点。对于导航栏中的锚点，请为它们指定一个特定的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>


window.onload=函数（）{
var nav_links=document.queryselectoral（'.nav link'）；
对于（变量i=0；i
您正在检查索引。因此，URL总是包含在诸如

如果您只是检查一个等式，它应该可以工作：

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';
        }
    }
}

函数setActive（）{
var aObj=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（var i=0；i

注意：您没有使用“var”声明局部变量，这使它们成为全局变量，并且在整个环境中可能不稳定。我在建议的代码中更改了这一点。
您正在检查indexOf。因此，URL始终包含在其他变量中，如

如果您只是检查一个等式，它应该可以工作：

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';
        }
    }
}

函数setActive（）{
var aObj=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（var i=0；i

注意：您没有用“var”声明局部变量，这使它们成为全局变量，并且在整个环境中可能不稳定。我在建议的代码中更改了这一点。
wordpress主题（或wordpress本身）没有已经在当前菜单项中添加了
active
？@PatrickEvans如果OP真的使用了WP菜单功能，它会的，但是看看网站的源代码，我怀疑不是这样的。（当然应该是这样。）wordpress主题（或者wordpress本身）不是这样吗是否已经将
active
添加到当前菜单项？@PatrickEvans如果OP实际使用的是WP菜单功能，它会这样做，但查看站点的源代码，我怀疑情况并非如此。（当然，应该是这样。）感谢您的帮助。但是我添加了脚本，但它不起作用。无需担心，我忘记添加：window.onload=setActive；感谢您的帮助。但是，我添加了脚本，但它不起作用。无需担心，我忘记添加：window.onload=setActive；