使用 PHP 高亮显示当前页面导航菜单项-php教程-PHP中文网

使用 PHP 高亮显示当前页面导航菜单项

DDD

发布： 2025-10-27 12:18:28

原创

1042人浏览过

使用 PHP 高亮显示当前页面导航菜单项

本文旨在提供使用 php 动态高亮显示当前页面对应导航菜单项的实用方法。通过获取当前 url 或文件名，并将其与导航链接进行比较，可以轻松地为当前页面添加特定的 css 类，从而实现高亮显示效果，提升用户体验。本文提供两种匹配方案，并附带 css 示例，帮助开发者快速实现此功能。

在构建动态网站时，高亮显示当前页面对应的导航菜单项是一种常见的用户体验优化手段。它能够清晰地告诉用户当前所处的位置，方便浏览和操作。本文将介绍如何使用 PHP 获取当前页面信息，并动态地为相应的导航链接添加 CSS 类，从而实现高亮显示的效果。 ### 获取当前页面信息要实现动态高亮，首先需要获取当前页面的 URL 或文件名。PHP 的 `$_SERVER` 超全局变量提供了丰富的信息，其中 `REQUEST_URI` 和 `SCRIPT_NAME` 较为常用。 * `REQUEST_URI`：包含请求的 URI，例如 `/index.php` 或 `/products/details.php?id=123`。 * `SCRIPT_NAME`：包含当前脚本的路径，例如 `/index.php` 或 `/products/details.php`。以下代码片段展示了如何获取当前页面的文件名： ```php

这段代码首先尝试获取 REQUEST_URI，如果不存在则尝试获取 SCRIPT_NAME。然后，使用 pathinfo() 函数提取文件名部分。

匹配导航链接并添加 CSS 类

获取到当前文件名后，就可以在导航菜单的 HTML 代码中，使用 PHP 的条件语句来判断是否需要为当前链接添加特定的 CSS 类。

方案一：精确匹配

这种方案适用于简单的导航结构，其中每个链接对应一个唯一的文件名。

<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisFile, 'team.php') !== false) {echo ' current-menu active';} ?>">Our team</a>

登录后复制

这段代码会检查 $thisFile 是否包含 "team.php"。如果包含，则为标签添加 current-menu 和 active 两个 CSS 类。

立即学习“PHP免费学习笔记（深入）”；

方案二：精确匹配和子目录匹配

如果导航菜单中存在同名文件位于不同子目录的情况，例如 team.php 和 support/team.php，则需要更精确的匹配。

可灵大模型

可灵大模型（Kling）是由快手大模型团队自研打造的视频生成大模型

385

查看详情

<?php
$thisUrl = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : (isset($_SERVER['SCRIPT_NAME']) ? $_SERVER['SCRIPT_NAME'] : null));
$thisFile = pathinfo($thisUrl ,  PATHINFO_BASENAME);
?>
<!-- 精确匹配 file.php -->
<a href="team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if ('team.php' === $thisFile)) {echo ' current-menu active';} ?>">Our Team</a>

<!-- 匹配 /path/file.php -->
<a href="support/team.php" class="list-group-item list-group-item-action py-2 ripple bg-button<?php if (stripos($thisUrl, 'support/team.php') !== false) {echo ' current-menu active';} ?>">Support Team</a>

登录后复制

这段代码首先获取完整的 URL ($thisUrl)。然后，对于精确匹配，直接比较文件名是否相等。对于子目录匹配，使用 stripos() 函数检查 URL 是否包含特定的路径和文件名。

添加 CSS 样式

最后，需要为添加的 CSS 类定义样式，以实现高亮显示的效果。例如：

.current-menu {
  border-left: 5px solid #blue; /* 左侧添加蓝色边框 */
  font-weight: bold; /* 加粗字体 */
}

.active {
  background-color: #f0f0f0; /* 修改背景颜色 */
}

登录后复制

可以根据实际需求自定义 CSS 样式，例如修改背景颜色、字体颜色、添加边框等。