Edit Question - KnowledgeHub

Title Body

I want to highlight the current menu you have click. I'm using CSS, but it is now working. 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; } here is my 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, I have already solve it and it is more simply than what you have gave. this is my answer: $(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"); } }); }); then on my css file: .active { background-color: #000; } /* to override the existing css for "a" tag */ #sub-header .active a{ color: #fff; }

Tags (comma-separated) Cancel