我想知道如何添加在当前页面上的导航栏上添加高亮显示框的功能。你知道,所以人们知道他们的页面。
非常喜欢这个网站,活动页面上有白框:https://woodycraft.net/home/
以下是导航栏的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;}
以下是我的某个网页的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>
答案 0 :(得分:15)
您可以使用jquery函数 window.location.href 将您现在使用的网站与&lt; href 进行比较列表元素中的&gt; 。例如,“index.html”:
<li><a href="index.html">Home</a></li>
以下代码在列表元素&lt;列表元素中搜索活动页面的 href 。 a&gt; 。然后将带有 addClass('active')的“active”类添加到活动页面&lt; a&gt; ,以便您现在可以通过 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>
您现在可以添加css条件,例如更改颜色:
#nav_bar .active {
color: #F8F8F8;
background-color: #4f81bd;
}
答案 1 :(得分:3)
如果您网站的每个HTML页面都有相同的导航栏,那么您可以这样做:
例如,在 index.html 中,将 class =&#39; active-page&#39; 添加到第一个菜单项:
<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>
然后在 status.html 中再次添加 class =&#39;活动页面&#39; ,但对于第二项:
<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>
为您的所有网页执行此操作。
最后在你的CSS中写一个活动页面的类,如下所示:
#nav_bar ul li a.active-page
{
background-color:blue;
}
答案 2 :(得分:0)
我在某处找到了一个非常简单的代码来实现它。
<script>
$(function () {
$('nav li a').filter(function () {
return this.href === location.href;
}).addClass('active');
});
</script>