这是一个非常常见的问题,但我找不到针对我的情况的任何解决方案。
我正在制作一个相当大的网站,有数百个页面,因此我创建了每个页面都相同的页眉页和页脚页。现在我想突出显示当前页面的菜单按钮,但我的菜单位于我在每个页面中包含的标题中<?php include("header.php");?>
所以我尝试的一切都不起作用。
我试过这个method但仅当每个页面中都有菜单代码时才有效(因此不使用 php include)。
有什么建议么?
这是我的菜单栏的代码
nav {
height: 40px;
background: black;
border-radius: 0 0 10px 10px;
}
#navblock {
margin-left: 160px;
}
nav ul{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li{
float: left;
font-size: 20px;
}
nav ul li:hover {
background: #666;
}
nav ul li:hover a {
color: #fff;
text-decoration: none;
}
nav ul li a {
display:block;
padding-top: 6px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 6px;
text-decoration: none;
color: white;
}
nav ul ul {
display: none;
background: #101010;
padding: 5px 5px 5px 5px;
width: auto;
position: absolute;
z-index: 1;
top: 40px;}
nav ul li:hover > ul {
display:block;
}
nav ul ul li {
float: none;
position: relative;
font-size: 14px;
margin-left: 0px;
}
nav ul ul li a:hover {
background: #666;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav>
<div id="navblock">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/anime/index.html">Anime</a>
<ul>
<li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
<li><a href="/anime/episodio00.html">episodio00</a></li>
</ul>
</li>
<li><a href="/serietv/index.html">Serie TV</a>
<ul>
<li><a href="">Lista completa Serie TV</a></li>
<li><a href="">Cerca Anime</a></li>
</ul>
</li>
</ul>
</div>
</nav>
试试这个脚本..
var url = window.location;
$('a[href="'+url+'"]').parent('li').addClass('active');
希望这可以帮助..
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)