PHP模板开发中如何实现导航栏当前访问页面高亮效果

步骤1：获取当前页面文件名 #

在你的导航模板代码最顶部添加以下PHP代码，获取用户当前访问的页面名称：

<?php
// 安全获取当前访问的页面文件名
$current_page = htmlspecialchars(basename($_SERVER['PHP_SELF']));
// 自定义高亮状态的class名
$active_class = 'nav-active';
// 若需要下拉父级同步高亮，定义子页面分组
$network_subpages = ['badwolf.php', 'mg.php', 'cabin.php', 'haven.php'];
?>

步骤2：添加高亮样式 #

在你的公共CSS文件中添加高亮样式，可根据你的网站设计调整参数：

.nav-active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-left: 4px solid #ffffff !important;
}

步骤3：给导航项加动态class判断 #

给所有导航的<a>标签的class属性添加判断逻辑，匹配当前页面时自动追加高亮class：

普通导航项示例（以About us为例） #

<a
  href="index.php"
  class="list-group-item list-group-item-action py-2 ripple bg-button <?php echo $current_page === 'index.php' ? $active_class : ''; ?>"
  aria-current="true"
>
  <i class="fas fa-address-card fa-fw me-3"></i><span>About us</span>
</a>

其他普通导航项（team.php、positions.php等）按照上述逻辑修改即可，只需要把判断条件里的文件名替换成对应href的文件名即可。

下拉父级导航（Network项）示例 #

如果需要访问子页面时父级也同步高亮，修改Network的a标签如下：

<a 
  href="network.php" 
  class="list-group-item list-group-item-action py-2 ripple bg-button ntw-item-head <?php echo $current_page === 'network.php' || in_array($current_page, $network_subpages) ? $active_class : ''; ?>"
>
  <i class="fas fa-network-wired fa-fw me-3"></i><span>Network</span><i class="fas fa-sort-down"></i>
</a>

内容的提问来源于stack exchange，提问作者Heelyx23