修改 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中文网其他相关文章!