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 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.