解决首页URL无文件名时导航栏Active状态失效的问题

本文针对Web开发中常见的首页URL不包含index.php文件名时，导航栏Active状态失效的问题，提供了一种解决方案。通过PHP获取当前文件名，并根据文件名动态添加或移除Active class，从而确保用户访问根目录时，首页导航链接也能正确高亮显示。

在Web开发中，为了提升用户体验，通常会使用Active class来高亮显示当前页面对应的导航链接。然而，当用户直接访问网站根目录（例如../myapp/）时，服务器可能会自动加载index.php，导致JavaScript无法正确识别当前页面，从而使得Active class失效。本文将介绍一种使用PHP动态判断当前页面并添加Active class的解决方案。

问题分析

问题在于当用户访问../myapp/时，浏览器地址栏并没有明确显示index.php，导致JavaScript无法通过window.location.href准确匹配到index.php的链接，因此无法添加Active class。

解决方案：使用PHP动态添加Active Class

一种有效的解决方案是使用PHP在服务器端判断当前访问的页面，并根据判断结果动态添加Active class。以下是一个示例代码：

<?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' || $filename == ''){ ?>
<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 } ?>
</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 } ?>
</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 } ?>
</li>
</ul>
</nav>

代码解释

1. 获取当前文件名：

   • $filename = basename($_SERVER[‘REQUEST_URI’], ‘?’ . $_SERVER[‘QUERY_STRING’]);：这行代码从$_SERVER[‘REQUEST_URI’]中获取请求的URI，并使用basename()函数提取文件名。’?’ . $_SERVER[‘QUERY_STRING’]用于移除URL中的查询字符串，确保只获取文件名。
   • $filename = preg_replace(‘/\.[^.\s]{3,4}$/’, ”, $filename);：这行代码使用正则表达式移除文件名中的扩展名（例如.php）。

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

   • 使用if语句判断$filename的值。如果$filename等于’index’或空字符串”（表示访问根目录），则为<a>标签添加active class。
   • 如果$filename不等于’index’或空字符串，则不添加active class。

注意事项

• 确保将以上PHP代码嵌入到你的sidebar.php文件中。
• 根据你的实际项目结构和文件名，调整if语句中的条件判断。
• 这种方法依赖于服务器端渲染，因此需要在服务器上安装并配置PHP。
• 如果使用了URL重写（例如通过.htaccess文件），可能需要相应地调整代码以正确获取文件名。

总结

通过使用PHP动态判断当前页面并添加Active class，可以有效地解决首页URL无文件名时导航栏Active状态失效的问题。这种方法简单易懂，并且能够很好地适应不同的项目结构。在实际开发中，可以根据具体情况进行调整和优化，以达到最佳的用户体验。