如何使用 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');
}

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

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