活动菜单突出显示CSS
我想突出显示您点击的当前菜单.我正在使用CSS,但它现在正在运行.
这是我的css代码:
#sub-header ul li:hover{ background-color: #000;}
#sub-header ul li:hover a{ color: #fff; }
#sub-header ul li.active{ background-color: #000; }
#sub-header ul li.active a{ color: #fff; }
这是我的HTML:
<div id="sub-header">
<ul>
<li> <a href="index.php">Home</a> </li>
<li> <a href="contact.php">Contact Us</a> </li>
<li> <a href="about.php">About Us</a> </li>
</ul>
</div>
当我悬停并且菜单处于活动状态时,这就是我喜欢的
悬停是可以的,问题是当我点击菜单后黑色地面不显示
@Jonathan,我已经解决了它,它比你给出的更简单.
这是我的答案:
$(function(){
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#sub-header a").each(function() {
// checks if its the same on the address bar
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
然后在我的CSS文件:
.active { background-color: #000; }
/* to override the existing css for "a" tag */
#sub-header .active a{ color: #fff; }
Sam*_*son 29
在每个页面的正文中添加一个类:
<body class="home">
或者,如果您在联系页面上:
<body class="contact">
然后在创建样式时考虑到这一点:
#sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}
#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }
最后,将类名应用于列表项:
<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="contact"><a href="contact.php">Contact Us</a></li>
<li class="about"><a href="about.php">About Us</a></li>
</ul>
这一点,无论何时您在body.home页面上,您的li.home a链接都将具有默认样式,表明它是当前页面.
- @justin请记住,只要用户启用了JavaScript,jQuery解决方案就会起作用. (2认同)