Make Twitter Bootstrap navbar link active

Viewed 81309

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>
10 Answers

You can use this...

<?php 
// Nav Active Links Start //
//echo basename($_SERVER["SCRIPT_FILENAME"], '.php'); 

$baseurl = basename($_SERVER["SCRIPT_FILENAME"], '.php'); 

//if ($baseurl == 'best'){ echo 'active';}
// Nav Active Links End //
?>

<a href="<?php echo $host;?>/en/dashboard/page/1" class="nav-item nav-link <?php if ($baseurl == 'index'){ echo 'active';}?>">Dashboard</a>
<a href="<?php echo $host;?>/b/best/page/1" class="nav-item nav-link <?php if ($baseurl == 'best'){ echo 'active';}?>">Best</a>
Related