javascript - 如何使用 JavaScript 更改当前页面导航按钮/链接的背景颜色？

Question

我想编写一个 JavaScript 脚本(不是 JQuery，如果可能的话)在页面处于事件状态时更改导航按钮的背景颜色。换句话说，当我点击“关于”链接并加载页面时，我希望“关于”按钮具有不同的背景颜色，以便用户可以看到他/她在哪个页面上。

这是我的导航链接 HTML:

   <nav>
    <ul class="navbar">
      <li class="navbutton"><a href="../pages/about.php">About</a></li>
      <li class="navbutton"><a href="../index.php">Local services</a></li>
      <li class="navbutton"><a href="../pages/intercity.php">Intercity Services</a></li>
      <li class="navbutton"><a href="../pages/transportcircle.php">Transport Circle Overview</a></li>
      <li class="navbutton"><a href="../pages/feedback.php">Feedback</a></li>
    </ul>
  </nav>

这是我想在页面处于事件状态时应用的 CSS 规则:

.navbutton-active {
    background-color: rgb(24, 99, 6);

到目前为止，我已经想出了这个脚本，尽管它除了抛出一个错误之外并没有做太多事情:

document.getElementsByClassName('navbutton').addEventListener("DOMContentLoaded", btnActive());

function btnActive() {
  document.getElementsByClassName('navbutton').classList.add('navbutton-active');
};

这是我在控制台中得到的错误:

TypeError: document.getElementsByClassName(...).classList is undefined

我的目标行为如下:

1. 页面加载并且相应的导航按钮背景更改为我在 .navbutton-active CSS 声明中指定的颜色。
2. 当用户点击另一个导航按钮时，事件页面导航按钮的颜色会更改为该颜色，而其他导航按钮颜色将保持默认颜色。

这可能很简单，但我想不通。

Answer 1

我认为第一步是找出哪个链接具有与当前 URL 匹配的 href 属性。

// Obtain a collection of all links

var buttons = document.querySelectorAll('.navbutton');
var activeButton, button, link, i;

// Iterate through each link to find if its href matches the URL

for (i = 0; (button = buttons[i]); i++) {
    link = button.firstElementChild;

    // a console.log(link.href, window.location.href)
    // might be useful here to ensure the comparisons will work

    if (link.href === window.location.href) {
        activeButton = button;
        break;
    }
}

// If a matching link was found, add the active class

if (activeButton) { 
     activeButton.classList.add('navbutton-active');
}

此 URL 比较步骤并非万无一失，可能需要改进。如果可以的话，这真的应该在服务器端完成。

您原始示例中的错误也是因为 getElementsByClassName() 返回一个类似数组的集合，您需要在与 classList 属性交互之前对其进行迭代在单个元素上(类似于我的解决方案中的 querySelectorAll()，但这是较新的 API)。