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>

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.