如何在没有默认背景颜色的情况下在 Bootstrap CSS 中保持活动导航状态？

Bootstrap CSS：维护活动导航

Bootstrap 提供了一个导航系统，允许用户轻松浏览网站的不同部分。然而，有时需要自定义没有默认背景颜色的菜单。在这种情况下，可能需要实现额外的逻辑来在滚动或单击菜单项时维持活动导航状态。

考虑以下场景：使用 HTML 和 CSS 创建了自定义菜单，类似于Bootstrap 网站上的子导航菜单。但是，向下滚动或单击菜单项时，活动类不会切换。

HTML:

<code class="html"><ul class="menu">
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul></code>

CSS:

<code class="css">.menu {
  list-style:none;
}
.menu > li {
  float: left;
}
.menu > li > a {
  color: #555;
  float: none;
  padding: 10px 16px 11px;
  display: block;
}
.menu > li > a:hover {
  color: #F95700;
}
.menu a[aria-current="page"],
.menu a[aria-current="page"]:hover {
  color:#F95700;
}</code>

要解决此问题，需要额外的 JavaScript。以下 jQuery 代码会在将活动类添加到当前项目之前从所有菜单项中清除活动类：

JavaScript:

<code class="js">$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});</code>

通过合并此代码，活动现在，在菜单中导航时，类将正确切换。该解决方案允许定制导航系统，以保持所需的视觉行为。

以上是如何在没有默认背景颜色的情况下在 Bootstrap CSS 中保持活动导航状态？的详细内容。更多信息请关注PHP中文网其他相关文章！