使用CSS和Javascript突出显示当前页面

当我点击say“about”时，它会添加我称之为“active”的类，但是它不会删除主页链接上先前的“active”

这是我的HTML

<nav id="main-nav" role="navigation">
    <ul>
        <li>
            <a href="/" data-description="Welcome">Home</a>
        </li>
        <li>
            <a href="/about" data-description="Learn more">About</a>
        </li>
    <ul>
</nav>

这是我的javascript

function setActive() {
  aObj = document.getElementById('main-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;

函数setActive（）{
aObj=document.getElementById（'main-nav'）.getElementsByTagName（'a'）；
对于（i=0；i=0）{
aObj[i].className='active'；
}
}
}
window.onload=setActive；

基本上，我希望能够做到以下几点：

当在主页上添加“active”类时，我可以用CSS突出显示链接

---

然后，当我点击About时，它会从主页上删除“active”类（从而删除突出显示的css），并将“active”类添加到About（从而添加突出显示的css）。

只需添加

aObj[I].className=“”在if条件之前

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

函数setActive（）{
aObj=document.getElementById（'main-nav'）.getElementsByTagName（'a'）；
对于（i=0；i=0）{
aObj[i].className='active'；
}
}
}
window.onload=setActive；

这基本上是从所有链接中删除每个类，并且只添加“活动”类（如果它是正确的页面）。但是，由于页面似乎正在刷新，我不知道该类如何从一个页面持续到另一个页面，因此有一个指向代码的链接会很有帮助。
我检查了您页面的源代码，我认为问题在于链接的创建方式（您发布的JavaScript代码没有问题）

问题：“主页”选项卡的URL为

https://dhctranslations.com/

导航上的其他URL（HREF）是

About Tab                 - https://dhctranslations.com/about
Certified Translation Tab - https://dhctranslations.com/certified-translation-services
Pricing Tab               - https://dhctranslations.com/pricing
...
... 

您在函数中执行的检查是“indexOf”检查。这就是为什么“主页”选项卡的条件总是返回true（因为URL的这一部分对于所有其他链接都是通用的）

建议：要解决这个问题，您可以在代码中更改'indexOf'检查并用相等检查替换它
或者将“主页”选项卡的URL更改为

https://dhctranslations.com/home

请注意，这些只是我的建议，我非常确信您可以找到一个更适合您的应用程序设计/架构的解决方案

更新：这是修改后的代码（请注意，这只是给你一个想法，根本不是一个干净的解决方案）

aObj=document.getElementById（'main-nav'）.getElementsByTagName（'a'）；
对于（i=0；iis jquery）一个有效的选项？它在标记中，但由于您使用的是纯javascript…嘿，Dansghc，请您接受答案，如果它对您有效。我认为else标记更可取，以避免设置两次类。尝试添加代码，但仍然存在相同的问题，我将继续尝试删除“活动”主页链接中的类非常感谢Vini，它在大多数情况下都有效，但是如果您单击“联系人”或“主页”，则不会添加活动类（也不适用于该网站的意大利版本）我真的很感谢你到目前为止给我的帮助，我对JS很陌生。这不是一个大问题，但是我需要花更多的时间阅读并习惯它！：）到目前为止，我已经有了这个
window.onload=setActive；函数setActive（）{var aObj=document.getElementById（'main-nav'）.getElementsByTagName（'a'）；var found=false；for（var i=aObj.length-1；i>=1&&！found；i--）{if（document.location.href.indexOf（aObj[i].href）>=0{aObj[i].className='active'；found=true；}if（！found&&document.location.href.replace（/\/$/，“”）==aObj[0]。href.replace（/\/$/，“”）aObj[0]。className='active'；}
这是因为主活动类再次工作，但联系人页面没有这样的运气，因为分配的链接没有尾随“/”。这在意大利页面上不工作的原因是该页面将类“当前”分配给“
”元素。我看你已经有了想法，正如你所做的那样明确提到-坐下来看看代码（特别是如何分配/存储值以及在JS代码中进行的检查）。这应该解决所有这些问题。像这样的挑战是学习任何新语言的乐趣所在。祝你好运，学习愉快！！完美！现在一切正常。JS文件中出现错误（与谷歌地图相关）无论出于何种原因，这显然是导致问题的原因。同时，这也是
元素“当前”的一个好位置，这只是我在处理意大利头球时的一个完全失误。非常感谢你的时间和帮助！太好了！！我很高兴能帮上忙。
  aObj = document.getElementById('main-nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) {
    aObj[i].className = "";

    // Changed the condition 
    // Concatenated the "/" for comparison as the array does not have trailing "/"s stored
    if(document.location.href === aObj[i].href+"/") {
      aObj[i].className='active';
    }
  }