以下是一些标题选项，请记住问题格式并重点关注文章的核心内容： **选项 1（直接且清晰）：** * **如何创建简化的活动导航菜单

修改 Bootstrap 主动导航

Bootstrap 的网站拥有一个子导航，可以轻松匹配部分并根据用户输入更改背景颜色。本文旨在指导您完成在不更改背景的情况下创建简化菜单的步骤，重点解决滚动或单击时激活类的问题。

CSS 自定义：

提供的 HTML 代码看起来是标准的，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;
}

要实现活动类切换功能，需要 JavaScript。提供的答案利用 jQuery 来实现所需的效果：

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

此代码确保单击菜单项时，所有活动类都将被删除，并且当前项目获得活动状态。这与 Bootstrap 子导航中观察到的行为一致。

要实现此功能，请确保 jQuery、bootstrap.js 和 bootstrap.css 文件的正确链接。

以上是以下是一些标题选项，请记住问题格式并重点关注文章的核心内容： **选项 1（直接且清晰）：** * **如何创建简化的活动导航菜单的详细内容。更多信息请关注PHP中文网其他相关文章！