我使用load()
方法从HTML文件加载导航栏。我希望每个<li>
的活动类动态更改。我尝试了很多选择,但它不起作用。Bootstrap主动类动态导航
这里是导航栏的代码,我保存为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>
这是我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>
这里我主动类的脚本不能正常工作。
http://jsfiddle.net/d2sxmn1L/1它的工作 – baao 2014-12-03 08:33:18
那里是working.but它不是为me.when工作我点击报告它去报告。 html页面,但仍处于活动状态 – Premkumar 2014-12-03 08:48:33