Question

如何使我正在访问的当前页面的导航菜单突出显示？

header.php

<div class="header-menu">
  <div class="nav">
    <ul>
      <a href="index.php"><li>Home</li></a>
      <a href=""><li>Register</li></a>
      <a href="login.php"><li>Login</li></a>
      <a href=""><li>FAQ</li></a>
      <a href=""><li>Advertise</li></a>
      <a href=""><li>Terms</li></a>
      <a href=""><li>Support</li></a>
      <a href=""><li>Forum</li></a>
    </ul>
  </div>
</div>

如果我当前在login.php页上，则应在导航菜单中突出显示登录项（如bg颜色更改）。我可以在PHP中使用条件逻辑来做到这一点，方法是在每个页面上设置一个标识当前页面的变量来设置活动类。

例如类似if($page == 2){ echo "active" }

但是，我想使用CSS来实现。我已经在Google上进行了搜索，并找到了在“每个”页面上添加活动类的方法，这非常简单，但是问题是我的导航菜单位于单个头文件中，该方法需要在所有页面上分别具有菜单。

如果无法使用CSS，如何使用CSS或Javascript / jQuery来实现呢？

Answer 1

您可以使用纯JavaScript和HTML来实现。

<a href="index.php" class="myLink" data-pathname="/index.php"><li>Home</li></a>
<a href="forum.php" class="myLink" data-pathname="/forum.php"><li>Forum</li></a>

如果需要<li>中的活动类，而不是锚标记<a>

<a href="index.php"><li class="myLink" data-pathname="/index.php">Home</li></a>
<a href="forum.php"><li class="myLink" data-pathname="/forum.php">Forum</li></a>

var links = document.getElementsByClassName("myLink");
var URL = window.location.pathname;
URL = URL.substring(URL.lastIndexOf('/'));
for (var i = 0; i < links.length; i++) {
  if (links[i].dataset.pathname == URL) {
    links[i].classList.add("active");
  }
}

单个标题文件中当前页面的活动导航菜单突出显示

1 个答案: