Question

我想编写一个JavaScript脚本（不是JQuery，如果可能的话），它会在页面处于活动状态时更改导航按钮的背景颜色。换句话说，当我点击＆＃34;关于＆＃34;链接并加载页面，我想要＆＃34;关于＆＃34;按钮具有不同的背景颜色，以便用户可以看到他/她所在的页面。

以下是导航链接的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

我瞄准的行为如下：

页面加载，相应的导航按钮背景更改为.navbutton-active CSS声明中指定的颜色。
当用户点击另一个导航按钮时，活动页面导航按钮的颜色会更改为此颜色，其他导航按钮颜色仍然是默认颜色。

这可能很简单，但我无法弄清楚。

Answer 1

我认为第一步是找出哪个链接是具有与当前网址匹配的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）。

Answer 2

function btnActive() 
  {document.getElementById("navbutton").className = "navbutton-active ";}

还要检查是否在上面的函数中使用alert("testing control");实际调用了btnActive（）

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

2 个答案: