Jquery highlight active menu

Question

I want to make my site menu highlight/active when user is browsing to the page, however below code doesn't work.

Could someone please check what's going wrong? thanks.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
// this will get the full URL at the address bar
var url = window.location.href; 

// passes on every "a" tag 
$("#nav_main a").each(function() {
    // checks if its the same on the address bar
    if(url == (this.href)) { 
        $(this).closest("li").addClass("active");
    }
});
});
</script>

<style type="text/css">
.active{
color:#f93;
}
</style>

<div id="nav_main">
<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>
</div>

Answer 1

This should also work:

<script>
$(document).ready(function(){
    var url = (window.location.href).split("/").pop();
    $('#nav_main a[href="'+url+'"]').addClass('active');
});
</script>

Answer 2

window.location.url will give the absolute url like http://zyx.com/<your-page>, so your equality condition will fail. You need to replace the equality test with a regex based solution which will test whether the location path ends with one of the menu item's href.

You need to change

 if(url == (this.href)) { 

to

if(new RegExp('/' + this.href + '^').test(url)) {

Answer 3

Well I have tried your Example and its working for me. If i keep the URL for one link blank then it enters the condition and applies the style. So I would suggest you to alert the URLs and see if you are getting the correct URLs.

Your code at JSFiddle : Working Code

<div id="nav_main">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="aboutFrontend.php">About</a></li>
    <li><a href="subscribeFrontend.php">Subscribe</a></li>
    <li><a href="newsFrontend.php">News</a></li>
    <li><a href="magFrontend.php">Mag</a></li>
    <li><a href="contactFrontend.php">Contact</a></li>
</ul>

I just kept one link blank. so please check the URLs.

I tried your code offline too. If the URL is correct its working.

Answer 4

This works much better than the accepted answer:

$(document).ready(function () {
    $page = window.location.href;

    if (!$page) {
      $page = 'index.html';
    }

    $('.mainNav  li a').each(function () {

      var $href = this.href;

      if (($href == $page) || ($href == '')) {
        $(this).parent().addClass('active');
      } else {
        $(this).parent().removeClass('active');
      }

    });
    return false;

  });

Answer 5

The reason you code didn't work is because var url = window.location.href will return a full url link such as http://localhost/yousite/aboutFrontend.php then you are trying to match with aboutFrontend.php so you are doing this:

if('http://localhost/yousite/aboutFrontend.php' === 'aboutFrontend.php') { 
     //!!This will not give you a match!!
   } 

For it to work use the full url on your links.such as

a href="http://localhost/yousite/aboutFrontend.php"

finally do something like this and it will work

       //Get the current page link
       current_page_link = document.location.href;

       //Search your menu for a linkURL that is similar to the active pageURL
       $(".navbar-nav a").each(function(){
           var link_loop = $(this).attr("href");
           if(link_loop === current_page_link){
               var found_url = $(this).attr("href");
               $('.navbar-nav a[href="'+found_url+'"]').addClass('active');
           }
       });