Bootstrap active class dynamic navigation
Question
I am loading nav bar from a HTML file using the load() method. I want the active class for each <li> to change dynamically. I tried many options, but it is not working.
Here is the nav bar code which I saved as navigation.html :
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Theatre Count</a>
</div>
<div>
<ul class="nav nav-pills pull-left" id="nav">
<li><a href="home.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="active"><a href="status.html"><span class="glyphicon glyphicon-flag"></span> Status</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Live Images</a></li>
<li><a href="reports.html"><span class="glyphicon glyphicon-stats"></span> Reports</a></li>
<li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Archive</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary pull-right logout"><span class="glyphicon glyphicon-log-out"></span> Log Out</button>
</nav>
Here is my status.html page code:
<body>
<script>
$(document).ready(function(){
$('#navigation').load('navigation.html');
});
</script>
<script>
$("#nav li a").on("click", function(){
$("#nav li").removeClass("active"); //Remove any previously "active" li
$(this).closest("li").addClass("active"); //Set click li as active
});
</script>
<div id="navigation"></div>
</body>
Here my active class script is not working.
2 answers
solution1
0 2015-03-10 11:53:59
Please see the example below. hope it useful for you.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script> <script> //Click on any li in ul with class 'navbar-nav' $('ul.navbar-nav li').click(function(e) { var $this = $(this); // declare variable for current li that we click $('ul.navbar-nav').find('li.active').last().removeClass('active') //find all li that class class active and remove $this.addClass('active'); //add 'active' class to current li. }); </script> </body> </html>
solution2
0 2017-07-10 19:55:01
Here's a quick, easy and short piece of jquery code that works well for this requirement.
// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
Credits: https://www.codementor.io/tips/2948713286/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.