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

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 页面上，那么在导航菜单中，登录项应该被突出显示（如背景颜色更改）。我可以在 PHP 中使用条件逻辑来设置活动类，方法是在每个页面上设置一个标识当前页面的变量。

例如像if($page == 2){ echo "active" }这样的东西

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

如果无法使用 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");
  }
}