javascript - 使用 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;

基本上我希望能够做的是:

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

然后，当我点击关于它时，它会从主页中删除“事件”类(从而删除突出显示的 css)并将“事件”类添加到关于(从而添加突出显示的 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;

这基本上是从所有链接中删除每个类，并且仅在页面正确时才添加“事件”类。但是由于页面似乎正在刷新，我不知道该类如何从一个页面持续到另一个页面，因此提供代码链接会很有帮助。