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

Question

我已经设法得到它，所以当我点击说“关于”时，它会添加我称之为“活动”的类，但它不会删除主页链接上以前的“活动”

这是我的 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;

基本上我想做的事情如下：

在主页上它会添加“活动”类，以便我可以使用 CSS 突出显示链接。

然后，当我点击 About 时，它会从家中删除“活动”类（从而删除突出显示的 css）并将“活动”类添加到 about（从而添加突出显示的 css）。

Answer 1

只需在 if 条件前添加aObj[i].className = "";。

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;

这基本上是从所有链接中删除每个类，并且只添加“活动”类，如果它是正确的页面。但由于页面看起来很清爽，我不知道该类如何从一个页面持续到另一个页面，所以有一个指向代码的链接会很有帮助。

Answer 2

我检查了您页面的来源，我认为问题在于创建链接的方式（您发布的 JavaScript 代码没有问题）。

问题：“主页”标签的 URL 是

https://dhctranslations.com/

导航上的其他网址（hrefs）是

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