Bootstrap活动类动态导航
[英]Bootstrap active class dynamic navigation
问题描述
I am loading nav bar from a HTML file using the load() method. 
我正在使用load()方法从HTML文件加载导航栏。 I want the active class for each <li> to change dynamically. 我希望每个<li>的活动类动态变化。 I tried many options, but it is not working. 我尝试了很多选择，但是没有用。
Here is the nav bar code which I saved as navigation.html : 这是我保存为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: 这是我的status.html页面代码：
<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 个解决方案
解决方案1
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>
解决方案2
0 2017-07-10 19:55:01
Here's a quick, easy and short piece of jquery code that works well for this requirement. 这是一个快速，简单且简短的jquery代码，可以很好地满足此要求。
// 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 积分： https : //www.codementor.io/tips/2948713286/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.