twitter-bootstrap Bootstrap：突出显示活动菜单链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34855372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: highlight active menu links
提问by easy.antonio
i've this website (made with Bootstrap) http://sg.nowcommu.myhostpoint.ch/and i need to highlight the active menu links (maybe via CSS).
我有这个网站（用 Bootstrap 制作）http://sg.nowcommu.myhostpoint.ch/，我需要突出显示活动菜单链接（可能通过 CSS）。
This is the code i'm using:
这是我正在使用的代码：
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2" title="Next Section"> <span class="text">Home</span></a></li>
<li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"> <span class="text">Mental Coaching</span></a></li>
<li data-slide="5" class="col-12 col-sm-2"><a id="menu-link-5" href="#slide-5" title="Next Section"> <span class="text">Personal Training</span></a></li>
<li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"> <span class="text">Ern?hrungsberatung</span></a></li>
<li data-slide="7" class="col-12 col-sm-2"><a id="menu-link-7" href="#slide-7" title="Next Section"> <span class="text">Kontakt</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
回答by Münich
You can simply use jQuery addClassand removeClassmethod.
您可以简单地使用 jQueryaddClass和removeClass方法。
HTML
HTML
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
CSS
CSS
li{
padding: 8px;
}
a{
text-decoration: none;
color: #000;
}
a:hover, a:focus{
color: red;
text-decoration: none;
outline: none;
}
.active{
font-size: 30px;
color: red;
border-bottom: 5px solid red;
}
jQuery:
jQuery：
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass("active");
$(this).addClass("active");
});
});
Working fiddle:
工作小提琴：
回答by dh762
Add a custom made CSS file after loading the Bootstrap CSS.
加载 Bootstrap CSS 后添加自定义 CSS 文件。
.nav a:hover{
color: #000;
}
回答by Radu Dragan
I suppose you mean on hover
我想你的意思是悬停
.nav span:hover {
color: red;
}
}
