解决首页URL不带文件名时Active Class失效的问题

在网页开发中，经常需要根据当前页面高亮显示导航栏的对应链接，即添加Active Class。 通常的做法是使用JavaScript获取当前URL，然后与导航链接的href属性进行比较，如果匹配则添加Active Class。 然而，当用户直接访问网站根目录（例如../myapp/）时，服务器通常会自动打开index.php，导致URL中不包含index.php，从而使JavaScript无法正确识别当前页面，导致Active Class失效。

解决这个问题，可以使用服务器端脚本（例如PHP）来动态判断当前页面，并根据判断结果添加Active Class。 以下是一种基于PHP的解决方案，它通过获取当前文件名，并与预期的文件名进行比较，从而确定是否添加Active Class。

PHP代码示例：

<?php
$filename = basename($_SERVER['REQUEST_URI'], '?' . $_SERVER['QUERY_STRING']);
$filename = preg_replace('/\.[^.\s]{3,4}$/', '', $filename);
?>
<nav class="side-bar">
<ul>
<li>
<?php if($filename == 'index'): ?>
<a href="https://www.php.cn/faq/index.php" class="category active">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
<?php else: ?>
<a href="https://www.php.cn/faq/index.php" class="category">
<i class="fi fi-bs-home"></i>
<span>Home</span>
</a>
<?php endif; ?>
</li>
<li>
<?php if($filename == 'room'): ?>
<a href="https://www.php.cn/faq/room.php" class="category active">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
<?php else: ?>
<a href="https://www.php.cn/faq/room.php" class="category">
<i class="fi fi-bs-apps"></i>
<span>Room</span>
</a>
<?php endif; ?>
</li>
<li>
<?php if($filename == 'contact'): ?>
<a href="https://www.php.cn/faq/contact.php" class="category active">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
<?php else: ?>
<a href="https://www.php.cn/faq/contact.php" class="category">
<i class="fi fi-br-comment-alt"></i>
<span>Contact</span>
</a>
<?php endif; ?>
</li>
</ul>
</nav>

代码解释：

1. 获取当前文件名：

   

   塔猫ChatPPT

   塔猫官网提供AI一键生成 PPT的智能工具，帮助您快速制作出专业的PPT。塔猫ChatPPT让您的PPT制作更加简单高效。

   43

   查看详情
   

   $filename = basename($_SERVER['REQUEST_URI'], '?' . $_SERVER['QUERY_STRING']);
   $filename = preg_replace('/\.[^.\s]{3,4}$/', '', $filename);

   • $_SERVER[‘REQUEST_URI’] 获取请求的URI，例如 /myapp/index.php 或 /myapp/。
   • basename() 函数从路径中提取文件名，例如 index.php 或 空字符串（当直接访问/myapp/时）。
   • ‘?’ . $_SERVER[‘QUERY_STRING’] 从URI中移除查询字符串。
   • preg_replace(‘/\.[^.\s]{3,4}$/’, ”, $filename) 移除文件扩展名，例如 .php。

2. 条件判断和Active Class添加：

   <?php if($filename == 'index'): ?>
   <a href="https://www.php.cn/faq/index.php" class="category active">
   ...
   </a>
   <?php else: ?>
   <a href="https://www.php.cn/faq/index.php" class="category">
   ...
   </a>
   <?php endif; ?>

   • 使用 if 语句判断 $filename 是否等于 ‘index’。
   • 如果相等，则为 <a> 标签添加 active class，否则不添加。

注意事项：

• 确保你的服务器配置允许执行PHP代码。
• 根据你的实际项目结构，修改代码中的文件名和路径。
• 如果你的URL使用了URL重写，可能需要调整获取文件名的逻辑。
• 这种方法需要在服务器端进行判断，相对于纯客户端的JavaScript方案，可能会增加服务器的负担。但对于解决首页Active Class失效的问题，这是一种可靠的解决方案。

总结：

通过使用PHP获取当前文件名，并根据文件名动态添加或移除Active Class，可以有效地解决在直接访问根目录时，首页的Active Class失效的问题。 这种方法简单易懂，并且可以灵活地应用于各种Web项目中。 记住，根据你的项目结构和需求，可能需要对代码进行适当的调整。