我不了解Twitter Bootstrap如何为导航执行活动链接.如果我有这样的常规导航(在轨道连接上使用ruby):
<ul class="nav">
<li class="active"> <a href="/link">Link</a> </li>
<li class=""> <a href="/link">Link</a> </li>
<li class=""> <a href="/link">Link</a> </li>
</ul>
Run Code Online (Sandbox Code Playgroud)
如何根据点击的链接保持活动状态?
在Bootstrap网站上,subnav与各部分匹配并更改背景颜色或滚动到该部分.我想创建自己的菜单,没有所有背景颜色和所有内容,但是,我将CSS更改为类似但是当我向下滚动或单击菜单项时,活动类不会切换.不知道我做错了什么.
HTML:
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
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 .active > a, .menu .active > a:hover {color:#F95700;}
Run Code Online (Sandbox Code Playgroud)
我查了一下文件; jQuery,bootstrap.js和bootstrap.css都正确链接.我是否必须添加一些额外的jQuery,或者我是否缺少一些CSS以使主动切换像他们网站上的subnav菜单一样?
这是HTML我为导航栏创建的代码bootstrap.
<div id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">About</a></li>
<li ><a href="contact_us.html">Contact</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
现在我需要添加此li的active动态类的菜单项时页面打开.
我只是检查这两个stackoverflow问题:一个 | 二
但我无法弄清楚这一点.
这是我的javascript -
$('#menu > ul.navbar-nav li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
希望有人能帮助我.谢谢.