如何为菜单项添加active CSS类？及示例中Home按钮未变红的原因

让我来一步步帮你解决这两个导航菜单的问题：

1. 如何为菜单项添加active CSS类？ #

添加active类主要有两种方式，你可以根据场景选择：

• 静态手动添加：如果是固定的页面（比如首页），直接在对应的<a>标签上加上class="active"即可，就像你示例里的Home链接那样：

  <a href="/index.php" class="active">Home</a>
  

• 动态自动添加（更适合多页面网站）：
  • 后端实现（以PHP为例）：通过判断当前页面的URL，给匹配的导航项自动加上active类：

    <?php
    // 获取当前页面文件名
    $currentPage = basename($_SERVER['PHP_SELF']);
    ?>
    <a href="/index.php" class="<?php echo $currentPage === 'index.php' ? 'active' : ''; ?>">Home</a>
    

  • JavaScript实现：页面加载时，对比当前URL和导航链接的href，给匹配项添加active类：

    document.addEventListener('DOMContentLoaded', function() {
      const currentPath = window.location.pathname;
      // 遍历所有导航链接
      document.querySelectorAll('.navbar-nav a').forEach(link => {
        if (link.getAttribute('href') === currentPath) {
          link.classList.add('active');
        }
      });
    });
    

2. 为什么示例中的Home按钮未被标记为红色？ #

问题出在你的CSS选择器上！你写的a:active是CSS伪类，它只匹配链接被点击激活的瞬间（比如鼠标按下尚未松开的状态），而不是带有active类的元素。

你示例里的Home链接是通过class="active"来标记的，所以需要用类选择器.active来匹配它。修改后的CSS应该包含.navbar a.active：

.navbar a:hover, .navbar a:focus, .navbar a:active, .navbar a.active { 
  color: red !important; 
}

这样带有active类的Home链接就会显示红色了。

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