Question

我想使导航栏动态化，以便在所选页面上添加类 active 。我知道我可以做下面的事情，但是，即使使用Javascript，也有没有更简单的方法，这样我就不需要复制和粘贴很多次了？
（也许是其他班级？）

$a='home';

<nav>
  <a href="#" class="nav-link <?php if($a==Home) echo 'active';?>">home</a>
</nav>

Answer 1

这是JavaScript的称呼：

<!doctype html>
<html>
<head>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <a  href="js" class="nav-item">Curent Page</a>
  <a  href="page2.html" class="nav-item">Difrent Page</a>
  <a  href="page3.html" class="nav-item">Difrent Page</a>
  <script>
  var navClass = document.getElementsByClassName("nav-item");
  var path = window.location.href;

  for (i = 0; i < navClass.length; i++) {
   if (path.includes(navClass[i].href)) {
      navClass[i].classList.add("active");
    }
  }
  </script>

</body>
</html>

它获取href的内容，并查看它是否包含在当前URL中（如果是），它添加了一个类

如何制作动态导航栏

1 个答案: