Я загружаю навигационную панель из HTML-файла, используя метод load()
. Я хочу, чтобы активный класс для каждого <li>
менялся динамически. Я пробовал много вариантов, но он не работает.Bootstrap active class dynamic navigation
Вот нав штрих-код, который я сохранил в 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
там working.but он не работает для me.when я нажимаю сообщить об этом идет сообщить. html, но статус активен – Premkumar