CSS 更改活动导航栏的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15866136/
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
Changing The Color of Active Navigation Bar
提问by ??????
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>
and the CSS is
和 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?
...例如，我希望（活动导航项的）文本为红色，背景颜色为灰色（无论如何）......你有什么想法吗？
Many thanks!
非常感谢！
回答by Enrique Marcos
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 Researchthen in the research.htmlyour navbar must be
如果要保持活动项的状态，则需要在每个 html 文件中包含导航栏布局。例如，如果您单击Research然后在research.html您的导航栏中必须是
<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>
And so on for all your links.
等等所有你的链接。
EDITYou can use JavaScript and do the trick:
编辑您可以使用 JavaScript 并做到这一点：
<!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>
回答by as2d3
I have an answer which is a bit different from other answers and worked very well for me:
我有一个与其他答案有点不同的答案，对我来说效果很好：
Suppose the links in the navbar (on the local server, https://myweburl.comwill be replaced by https://localhost:8000or https://127.0.0.1:8000) are as follows:
假设导航栏中的链接（在本地服务器上，https://myweburl.com将被替换为https://localhost:8000或https://127.0.0.1:8000）如下：
Home => https://myweburl.com
主页 => https://myweburl.com
Blog => https://myweburl.com/blog/1, https://myweburl.com/blog/2, etc.
博客 => https://myweburl.com/blog/1、https://myweburl.com/blog/2等。
Skills => https://myweburl.com/skills/
技能 => https://myweburl.com/skills/
Contact => https://myweburl.com/contact/
联系 => https://myweburl.com/contact/
So you can use this snippet to make the respective link in the navbar active:
因此，您可以使用此代码段使导航栏中的相应链接处于活动状态：
$(document).ready(function () {
var loc = window.location.href; // grabbing the url
var str = loc.split("/")[3]; // splitting the url and taking the third string
if(str.localeCompare("") == 0)
$("#home").addClass("active");
else
$("#" + str).addClass("active");
});
Also, in your HTML, remove 'active' class and put respective IDs in all the links. By respective IDs, I mean that the ID should be named according to the URL.
此外，在您的 HTML 中，删除“活动”类并在所有链接中放置相应的 ID。通过各自的 ID，我的意思是 ID 应该根据 URL 命名。
What the above JS code is doing: Grabs the URL and splits it into an array of strings. Then it takes the 4th string in variable str (the fourth string will be at the third index). And then, it puts the 'active' class in that link.
上面 JS 代码的作用是：抓取 URL 并将其拆分为字符串数组。然后它需要变量 str 中的第四个字符串（第四个字符串将位于第三个索引处）。然后，它将“活动”类放在该链接中。
The benefit of this method: Apart from the fact that it is very simple, if the user directly goes to the link instead of clicking the link in the navbar then also this method works.
这种方法的好处：除了它非常简单之外，如果用户直接转到链接而不是点击导航栏中的链接，那么这种方法也有效。
Problem with this method: The URL of every link in the navbar must be known. If the format of the URL is different then a little change in the code can help you.
此方法的问题：必须知道导航栏中每个链接的 URL。如果 URL 的格式不同，那么对代码进行一些更改可以帮助您。
回答by Derya
This js worked for me, I placed it on each page where navigation is a php include:
这个js对我有用，我把它放在每个导航是php的页面上，包括：
<script>
$(function() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav li a").each(function () {
var href = $(this).attr('href');
if(path.substring((path.lastIndexOf('/')+1),path.lenght) === href) {
$(this).closest('li').addClass('active');
} else {
$(this).closest('li').removeClass();
}
});
});
