使用 html 和 css 更改活动的 Bootstrap 菜单项

Question

我希望能够根据我所在的文件更改哪个菜单项处于活动状态。我在我的三个文件中包含 menu.html（下面的文件）：a.html、b.html 和 c.html。 如何仅使用 html 和 css 执行此操作？ 我使用 Boostrap 菜单。 我基本上想根据我所在的当前文件更改处于活动状态的菜单项。

<ul id="navbar_menu" class="nav nav-tabs nav-justified">
            <li id="a"><a href="#">a</a></li>
            <li id="b"><a href="#">b</a></li>
            <li id="c"><a href="#">c</a></li>   
        </ul>

Answer 1

据我了解，您正在使用 PHP 包含菜单。

您可以这样做以自动查找当前页面的相关菜单：

在您的 3 个页面中，您将“相关类”添加到作为包装器的 div/section：

<section class="a">
   <!-- your php include for menu-->
</section>

第二页：

<section class="b">
   <!-- your php include for menu-->
</section>

第三页：

<section class="c">
   <!-- your php include for menu-->
</section>

在你的 CSS 中：

.a > li#a {
   /* Active Menu Style */
}
.b > li#b {
   /* Active Menu Style */
}
.c > li#c {
   /* Active Menu Style */
}

这将使用您的 php 包含文件启用当前页面的菜单：

<ul>
    <li id="a"><a href="#">a</a></li>
    <li id="b"><a href="#">b</a></li>
    <li id="c"><a href="#">c</a></li>   
</ul>

Answer 2

如果我是对的，您应该创建一个活动类并将其添加到实际的活动列表项中。