Make Twitter Bootstrap navbar link active

Question

What's the standard way to make the active link in a Twitter Bootstrap navbar bolded? It's clear that a link gains the active appearance by gaining the "active" class. For example, the Home link below is active. When I click any link in the navbar, should a use jQuery to remove all classes from li elements and then add the active class to the link I've id'd?

<ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> 

EDIT: I included

<script type="text/javascript"> $('.nav li a').on('click', function() {     alert('clicked');     $(this).parent().parent().find('.active').removeClass('active');     $(this).parent().addClass('active'); }); </script> 

after the links. The alert appears when I click a link, but the "active" class is not added to the link.

Here's all of my navbar HTML:

<div class="navbar navbar-fixed-top">     <div class="navbar-inner">         <div class="container">             <a class="brand" href="#">AuctionBase</a>             <div class="nav-collapse">                     <ul class="nav">                         <li><a href="home.php">Search</a></li>                         <li><a href="about.php">About</a></li>                     </ul>             </div>         </div>     </div> </div> 

Answer 1

You need to ensure that you set the active class as part of the request response (as the page loads) and not before ie when the user clicks a link to request a different page.

First you need to determine which navlink should be set as active and then add the active class to the <li>. The code would look something like this

Tested by asker:

HTML within php file

Call a php function inline within the <li> markup passing in the links destination request uri

<ul class="nav">     <li <?=echoActiveClassIfRequestMatches("home")?>>         <a href="home.php">Search</a></li>     <li <?=echoActiveClassIfRequestMatches("about")?>>         <a href="about.php">About</a></li> </ul> 

PHP function

The php function simple needs to compare the passed in request uri and if it matches the current page being rendered output active class

<?php   function echoActiveClassIfRequestMatches($requestUri) {     $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");      if ($current_file_name == $requestUri)         echo 'class="active"'; }  ?> 

Answer 2

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

This tutorial has a great and ultimate solution for this "problem". I was dealing with it a while ago and working great for me, customizable as well

$(document).ready(function() {     $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); });