Html 当前页面的导航栏突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26819675/
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
Navbar highlight for current page
提问by thomas0721
I was wondering how I would add the ability to add a highlight box the nav bar on the page your currently on. You know so people know what page their on.
我想知道如何添加在当前页面上的导航栏上添加突出显示框的功能。你知道，所以人们知道他们在哪个页面上。
Very much like this site with the white box on the active page:https://woodycraft.net/home/
非常喜欢这个网站，活动页面上有白框：https: //woodycraft.net/home/
Here is the CSS for my nav bar:
这是我的导航栏的 CSS：
/*TOP NAV BAR SECTION*/
*{margin: 0px;
padding: 0px;}
#nav_bar {background-color: #a22b2f;
box-shadow: 0px 2px 10px;
height: 45px;
text-align: center;}
#nav_bar > ul > li {display: inline-block;}
#nav_bar ul > li > a {color: white;
display: block;
text-decoration: none;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
line-height: 45px;}
#nav_bar ul li ul {display: none;
list-style: none;
position: absolute;
background: #e2e2e2;
box-shadow: 0px 2px 10px;
text-align: left;}
#nav_bar ul li a:hover {background: #8e262a;}
#nav_bar a:active {background: white;}
#nav_bar ul li:hover ul {display: block;}
#nav_bar ul li ul li a {color: #252525;
display: block;}
#nav_bar ul li ul li a:hover {background: #4485f5;
color: #fff;}
Here is the HTML for one of my pages:
这是我的其中一个页面的 HTML：
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="status.html">Status</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="#">Gamemodes</a>
<ul>
<li><a href="survival.html">Survival</a></li>
<li><a href="pure-pvp.html">Pure-PVP</a></li>
<li><a href="gamesworld.html">Gamesworld</a></li>
</ul>
</li>
<li><a href="rules.html">Rules</a></li>
<li><a href="vote.html">Vote</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
采纳答案by Bagherani
If you have the same navigation bar in each HTML page of your website, then you can do like this:
For example in index.htmladd class='active-page'to the first menu item:
如果您网站的每个 HTML 页面中都有相同的导航栏，那么您可以这样做：
例如在index.html中将class='active-page' 添加到第一个菜单项：
<div id="nav_bar">
<ul>
<li><a href="index.html" class='active-page'>Home</a></li>
<li><a href="status.html">Status</a></li>
<li><a href="info.html">Info</a></li>
Then in the status.htmladd class='active-page'again but for the second item:
然后在status.html 中再次添加class='active-page'但对于第二项：
<div id="nav_bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="status.html" class='active-page'>Status</a></li>
<li><a href="info.html">Info</a></li>
And do this for all of your pages.
并对所有页面执行此操作。
Finally in your css write a class for active-pagelike this:
最后在你的 css 中为活动页面编写一个类，如下所示：
#nav_bar ul li a.active-page
{
background-color:blue;
}
回答by thomas0721
You can use the jquery function window.location.hrefto compare the site you are on right now with your hrefof < a >in the list element. For example, "index.html":
您可以使用 jquery 函数window.location.href将您现在所在的站点与列表元素中< a > 的href进行比较。例如，“index.html”：
<li><a href="index.html">Home</a></li>
The code below searches for the hrefof the active page in the list elements < a >. Then adds the class "active" with addClass('active')to the active pages < a >so that you can now call it via CSS. Put this code in the head of your html file.
下面的代码在列表元素< a >中搜索活动页面的href。然后使用addClass('active')将类“active”添加到活动页面< a >以便您现在可以通过CSS调用它。将此代码放在 html 文件的头部。
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active'); $(this).parents('li').addClass('active');
}
});
});
</script>
You can now add your css conditions like changing the color:
您现在可以添加您的 css 条件，例如更改颜色：
#nav_bar .active {
color: #F8F8F8;
background-color: #4f81bd;
}
