CSS 如何在PHP中设置当前页面为“active”

在本文中，我们将介绍如何使用CSS和PHP将当前页面设置为“active”。

阅读更多：CSS 教程

什么是“active”状态？

在网站设计中，我们经常需要将当前所在页面的导航菜单项或链接设置为特殊样式，以便用户可以清楚地知道他们目前所在的页面。这个特殊样式通常被称为“active”状态。当用户浏览不同的页面时，相应的导航菜单项或链接将被标记为活动状态，以提供更好的用户体验和导航指示。

使用CSS设置“active”样式

要设置“active”样式，我们可以使用CSS的:active伪类选择器。该伪类可以选择处于活动状态的元素，并使其具有特定的样式。例如：

.nav-item:active {
  background-color: blue;
  color: white;
}

在上面的示例中，我们选择了一个类名为“nav-item”的元素，并为其设置了活动状态下的背景颜色为蓝色，文字颜色为白色。

但是，使用:active伪类选择器仅在用户点击该元素时才会生效。如果我们想要根据当前页面设置导航菜单项的活动状态，我们需要使用PHP来实现。

使用PHP判断当前页面

在PHP中，我们可以使用$_SERVER['PHP_SELF']来获取当前页面的URL。该变量返回正在被执行的脚本的名称，包括其路径信息。我们可以通过判断当前页面的URL来设置导航菜单项的活动状态。以下是一个示例代码：

<?php
 $current_page =$ _SERVER['PHP_SELF'];
?>

在上面的示例中，我们将当前页面的URL存储在$current_page变量中。接下来，我们可以在HTML代码中使用这个变量来判断当前页面并设置相应的活动状态。

在导航菜单中设置当前页面的活动状态

假设我们有一个导航菜单，其中包含多个链接。通过使用PHP获取当前页面的URL，我们可以将当前页面的链接设置为活动状态。以下是一个示例代码：

<ul class="nav">
  <li <?php if( $current_page == '/home.php') echo 'class="active"'; ?>> <a href="/home.php">Home</a> </li> <li <?php if($ current_page == '/about.php') echo 'class="active"'; ?>>
    <a href="/about.php">About</a>
  </li>
  <li <?php if($current_page == '/services.php') echo 'class="active"'; ?>>
    <a href="/services.php">Services</a>
  </li>
</ul>

在上面的代码中，我们使用了if语句来判断当前页面的URL是否与导航菜单项链接的URL匹配。如果匹配，则给对应的<li>元素添加了一个名为“active”的class属性，从而设置了活动状态的样式。