Question

我正在制作一个导航栏，并希望当我在特定页面上时添加活动类
下面的代码不会破坏if语句（带有注释）

<html>
<head>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <a  href="a.html" class="nav-item">nav</a>
  <a  href="b.html" class="nav-item">nav</a>
  <p id="z">aaa</p>
  <p id="zz"></p>

  <script>
  var navClass = document.getElementsByClassName("nav-item");
  var path = window.location.href;

  for (i = 0; i < navClass.length; i++) {
//my issue
    if (navClass[i] === path) {
      navClass[i].classList.add("active");
    }
  }
  //for testing
  var xx = navClass[0];//.getAttribute("herf");
  document.getElementById("zz").innerHTML = xx + "<br>" + path;

  </script>

</body>
</html>

Answer 1

正在使用的变量的格式与代码所暗示的格式略有不同。

如果打开控制台并访问window.location.href变量，您将看到它包含完整的有效URL，而不是导航中链接所遵循的相对格式，因此您的绝对测试（===）将每次都会失败，因为它们永远不会相等。

https://stackoverflow.com/questions/54508836/if-statement-not-working-with-classlist-add

不相等

if-statement-not-working-with-classlist-add

您可以通过使导航链接为绝对路径来解决此问题，但这将为您带来更多问题。

如果您将测试从比较两者更改为在path变量中查找导航的href，则代码将起作用。此外，您需要针对对象的href属性（而不是对象本身）进行测试。

更改：

if (navClass[i] === path) {

收件人：

if (path.includes(navClass[i].href)) {

编辑：忘记为建议的更改添加.href属性

Answer 2

您需要更改检测方式以及添加方式。同时将navClass设置为数组，而不是NodeList：

var navClass = Array.prototype.slice.call(document.getElementsByClassName("nav-item"));
var path = window.location.href;

navClass.forEach(elem => {
    if (path.includes(elem.href)) {
        elem.classList.add("active");
    }
});

如果语句不适用于classList，请添加

2 个答案: