更改活动导航栏的颜色 [英] Changing The Color of Active Navigation Bar
问题描述
我正在使用一个简单的引导程序顶部固定的导航栏，我想更改活动页面的颜色...但是我认为我的代码中缺少某些内容
I am using a simple bootstrap top fixed navigation bar and I would like to change the color of the active page... however I think something is missing in my code
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="active"><a href="#skdill" >skisll</a></li>
<li class="active"><a href="#skill">skill</a></li>
<li class="active"><a href="#research">research</a></li>
<li class="active"><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
而CSS是
.navbar {
position: fixed;
width: 100%;
}
.navbar .nav {
float: none;
}
.navbar .nav>li {
width: 25%;
}
.content {
padding-top: 80px;
}
#nav-collapse li a:hover {
color: blue;
}
#nav-collapse a:hover {
background-color: gray;
}
#nav-collapse li.active {
color:green;
background-color: yellow;
}
#nav-collapse li.active a {
color: red;
}
...例如，我希望(活动导航项的)文本为红色，背景颜色为灰色(无论如何)...您有想法吗?
... I would like for example the text (of the active navigation item) to be red and the background color to be gray (whatever)... do you have an idea?
非常感谢！
推荐答案
如果要保持活动项目的状态，则需要在每个html文件中包括导航栏布局.例如，如果您单击 Research ，则在 research.html 中，您的导航栏必须为
If you want to keep the state of the active item then you need to include the navbar layout in every html file. For example if you click on Research then in the research.html your navbar must be
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li ><a href="#skdill" >skisll</a></li>
<li ><a href="#skill">skill</a></li>
<li class="active"><a href="#research">research</a></li>
<li ><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
所有链接的依此类推.
编辑您可以使用JavaScript并完成技巧:
EDIT You can use JavaScript and do the trick:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
</style>
</head>
<script>
$(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
</script>
<body>
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="home"><a href="#home">Home</a></li>
<li id="skill"><a href="#skill">Skill</a></li>
<li id="research"><a href="#research">Research</a></li>
<li id="link"><a href="#link">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
演示: http://jsfiddle.net/Ag47D/3/
这篇关于更改活动导航栏的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
