我正在制作一个导航栏,并希望在该特定页面上添加活动类
下面的代码不会破坏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>

最佳答案

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

如果打开控制台并访问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属性到建议的更改

07-24 09:50
查看更多