如何为PHP动态引入的导航栏实现当前页面Active样式？

这里有几种实用的方法，能让你在共享的header.php里动态给当前页面的导航项加上active类：

方法1：每个页面定义标识变量 #

在每个引入header.php的页面顶部，先定义一个标识当前页面的变量，然后在header.php里根据这个变量判断添加active类。

比如在index.php里：

<?php 
$currentPage = 'home'; // 定义当前页面标识
include 'header.php'; 
?>

在about.php里：

<?php 
$currentPage = 'about';
include 'header.php'; 
?>

然后修改header.php的导航代码：

<nav>
  <ul>
    <li class="<?php echo ($currentPage === 'home') ? 'active' : ''; ?>">
      <a href="index.php">首页</a>
    </li>
    <li class="<?php echo ($currentPage === 'about') ? 'active' : ''; ?>">
      <a href="about.php">关于我们</a>
    </li>
    <li class="<?php echo ($currentPage === 'contact') ? 'active' : ''; ?>">
      <a href="contact.php">联系我们</a>
    </li>
  </ul>
</nav>

这种方法逻辑清晰，不受URL结构变化影响，适合页面数量不多的场景。

方法2：通过服务器变量自动识别当前页面 #

不需要在每个页面定义变量，直接用PHP的$_SERVER全局变量获取当前页面的文件名，自动匹配导航项。

修改header.php：

<?php
// 获取当前页面的文件名（比如index.php、about.php）
$currentFile = basename($_SERVER['PHP_SELF']);
?>
<nav>
  <ul>
    <li class="<?php echo ($currentFile === 'index.php') ? 'active' : ''; ?>">
      <a href="index.php">首页</a>
    </li>
    <li class="<?php echo ($currentFile === 'about.php') ? 'active' : ''; ?>">
      <a href="about.php">关于我们</a>
    </li>
    <li class="<?php echo ($currentFile === 'contact.php') ? 'active' : ''; ?>">
      <a href="contact.php">联系我们</a>
    </li>
  </ul>
</nav>

如果你的页面带URL参数（比如blog.php?id=1），上面的方法依然有效，因为basename($_SERVER['PHP_SELF'])只会返回blog.php，不会包含参数。

如果是带子目录的URL（比如/blog/post.php），可以用parse_url提取路径再取文件名：

$currentPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$currentFile = basename($currentPath);

注意CSS优先级 #

确保你的active类样式优先级高于hover样式，避免冲突：

/* 未选中项的hover样式 */
nav ul li a:hover {
  color: #e63946;
  text-decoration: underline;
}

/* 当前活跃项的样式 */
nav ul li.active a {
  color: #1d3557;
  font-weight: bold;
  text-decoration: none;
}

这样当前页面的导航项会显示active样式，其他项保持正常的hover效果。

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