活动菜单突出显示CSS [英] Active Menu Highlight CSS
问题描述
我要突出显示您点击的当前菜单。
I want to highlight the current menu you have click. I'm using CSS, but it is now working.
这里是我的css代码：
here is my css code:
#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>
这是我喜欢当我悬停，如果菜单是活动
This is what I like when I hover and if the menu is active
悬停就好了，问题是当我点击菜单后黑色地面不显示
Hover is okay, The problem is when I after click the menu the black ground is not display
@Jonathan，我已经解决了它，它比你给的更简单。
@Jonathan, I have already solve it and it is more simply than what you have gave.
这是我的答案：
$(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文件中：
then on my css file:
.active { background-color: #000; }
/* to override the existing css for "a" tag */
#sub-header .active a{ color: #fff; }
推荐答案
<body class="home">
或者如果您在联系页面上：
Or if you're on the contact page:
<body class="contact">
然后在创建样式时考虑这一点：
Then take this into consideration when you're creating your styles:
#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; }
最后，将类名应用到您的列表项：
Lastly, apply class names to your list items:
<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 链接将具有默认样式，表明它是当前页面。
This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.
这篇关于活动菜单突出显示CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
