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');
});

Answer 3

If you do not want to deal with server side and in the case where all hrefs are simple, like '/page.php', you can call

$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

after page is loaded.

Answer 4

You can try:

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

It would be best to give your nav an id attribute though, because you may have more than one nav on a page with the nav class.

$('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

Alternatively, instead of using .css('font-weight', 'bold') , you could just put this in the stylesheet:

.active {
    font-weight: bold;
}

Answer 5

Add the following script at the bottom of the page:

<script>
    $(document).ready(function() {
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    });
</script>

Answer 6

Chris Moutray your answer helped me a lot in the develop of my software (i'm using ZendFramework). I wrote this view helper:

<?php

class Zend_View_Helper_ActiveOrNot {

    function activeOrNot ( $requestUri ) { 

        $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

        if ($current_file_name == $requestUri)

            echo 'class="active"';

    }   

}

In this case i call this helper in the view thus:

<?php $this -> activeOrNot ( "public" );

Thanks U!!

Answer 7

You can solve it with CSS.

Add a class to the body of each page:

<body class="home">

Or if you're on the contact page:

<body class="contact">

Then take this into consideration when you're creating your styles:

ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } 
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }

Lastly, apply class names to your list items:

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.

Answer 8

If you assign $pageTitle to the page name, you can do this without javascript

<ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>

Answer 9

Just put the below code into "head" section.

<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>

obviously don't forget your call to jquery.js before.

And your:

<style>
.active{something...}
</style>

Answer 10

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>