如何使用自定义 CSS 和 JavaScript 在 Bootstrap 菜单中实现主动导航？

使用 Bootstrap CSS 实现主动导航

在 Bootstrap 中创建自定义导航菜单，同时维护活动类功能可能是一个挑战。本文解决了滚动或单击菜单项时活动类不切换的问题。

HTML 结构

提供的 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

菜单的 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

要正确切换活动类，需要 JavaScript。以下代码片段处理菜单项上的点击，并确保一次只有一个项目处于活动状态：

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

其他注意事项

在这种特定情况下，Bootstrap JavaScript 中以 .navbar 表示的导航正在成为攻击目标。但是，在调整此解决方案时，考虑实施的具体细节始终很重要。

通过利用提供的 HTML、CSS 和 JavaScript，您可以实现具有所需活动类功能的自定义导航菜单。

以上是如何使用自定义 CSS 和 JavaScript 在 Bootstrap 菜单中实现主动导航？的详细内容。更多信息请关注PHP中文网其他相关文章！