how to dynamically set the active class in bootstrap navbar? - html

Question

I am using bootstrap nav bar with codeigniter as backend.
Now In my application i want to change the < li> class to active dynamically for each page.
So i can known i am on which page currently.
Below is my code:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">

Answer 1

You can use this javascript to add active class based on current url please try it
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
</script>

Answer 2

Can't you just use this replacing your <a> tags. This will match the current uri string, with the links href attribute. If it matches, it add's an active class to the link. You can style the .active using you
Company
So the entire code will be.
<ul class="nav navbar-nav">
<li>Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">

Answer 3

Your pages should know which menu should be set as active.
Try adding an id to your <li> and add a javascript code to your pages to set the active menu based on the ID.
Example:
<ul class="nav navbar-nav">
<li id="menu-dashboard" class="active">Dashboard</li>
<li id="menu-company">Company</li>
<li id="menu-user">Users Management</li>
<li id="menu-key-management">Key Management</li>
<li id="menu-activation">Activated Devices</li>
</ul>
<script>
var menuid = "menu-dashboard";
$(function() {
$('.nav li').removeClass('active');
$(menuid).addClass("active");
});
</script>
Pages:
Add the following javascript lines to your pages
Company page
menuid = "#menu-company";
User page
menuid = "#menu-user";

Answer 4

You can achieve it by using jQuery or JavaScript.
jQuery example:
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});

Answer 5

The jQuery in the accepted answer do not know the difference if the visitor is coming from http://example.com or http://example.com/index.php and would not activate the "home" menu-item. This is my fix for that.
HTML This is a snippet from my menu:
<div class='navbar'>
<a href='index.php'><div class='nav-icon icon-home'></div>Hem</a>
<a href='calender.php'><div class='nav-icon icon-calender'></div>Kalender</a>
<a href='exchange.php#utbyte'><div class='nav-icon icon-byte'></div>Byten</a>
</div>
This is a function I've added to my database controller class to find out what protocol the visitor use:
public static function adr_protocol()
{
$str = 'http://';
if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
return $str;
}
jQuery:
;var ix = '<?php echo DBController::adr_protocol()."{$_SERVER['HTTP_HOST']}/"; ?>';
var url = (window.location==ix)?window.location+'index.php':window.location;
$('div.navbar a[href="'+ url +'"]').parent().addClass('active');
$('div.navbar a').filter(function() {
return this.href == url;
}).addClass('active');