Assign "active" class to navbar item based on current page URL with jQuery

footer.js

$(document).ready(function() {
	// get current URL path and assign 'active' class
	var pathname = window.location.pathname;
	$('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})

header.html

<!-- your average Bootstrap navbar component, in this case placed in an include called header.html -->
<div class="navbar">
	<div class="navbar-inner">
		<ul class="nav">
			<li><a href="/">Home</a></li>
			<li><a href="/about.php">About</a></li>
			<li><a href="/contact.php">Contact</a></li>
		</ul>
	</div>
</div>

use this for children:

$('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); });

So, @Firestorm-Graphics is it possible to do the same thing with my code too or?

<nav class='navbar navbar-default'>
   <ul class='nav navbar-nav'>
      <li class='active'><a href='.' target='_self'>Home</a></li>
      <li><a href='network' target='_self'>Network</a></li>
      <li><a href='hardware' target='_self'>Hardware</a></li>
      <li><a href='help' target='_self'>Help</a></li>
   </ul>
</nav>

Thank you!

Does the file extension have to be present? I am trying to do it with a custom navbar in wordpress..

thanks @Firestorm-Graphics

What about adding the active to

I think this will add it to tag

I can't find any information on what the "+" in
$('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
do... can you please explain

@ericauv I think because it's a variable, you should use a +

@ericauv the + here works as a text concatenation operator:

mytext = '.nav > li > a[href="' + pathname + '"]'

Please note the trick of using single quote for string that contains a double quote.

So, at the end of the day, if the variable pathname as a value of www.mysite.com then

mytext = .nav > li > a[href="www.mysite.com"]

Thanks for the help

Thank you very much! it's works

Thx! Simple and effective 👍

Works like a charm. Thanks man.

I have been looking for something like this FOR DAYS!! thank you from a rookie!

Good job...please how do I make each page of this code active
`

<?php

            $query = "select* from main_menus";
            $result = mysqli_query($con,$query);

            while($row = mysqli_fetch_assoc($result)) {
                $main_menus_id = $row['menu_id'];
                $menu_title = $row['menu_title'];
                $menu_url = $row['menu_url'];
          ?>
        <li class="nav-item ">
          <a href="<?php echo $menu_url ?>"><?php echo $menu_title ?></a>
        </li>
        <?php 
      }
      ?>
      </ul>
    </div>`

Thank you sir.