У меня есть html в качестве боковой панели и используйте Bootstrap
.
<ul class="nav nav-list">
<li class="active"><a href="/">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
</ul>
Я хочу кое-что сделать:
Когда я click
ссылка, такая как ссылка 3, page content
изменится на контент 3-го уровня, а ссылка 3 будет иметь класс active
и удалит активный clss в ссылке 1.
Я думаю, что это можно реализовать в jQuery
, и я искал много вопросов в SO, например:
- Как сохранить активную ссылку в списке навигации (twitter bootstrap)?
- Базовая загрузка CSS Active Navigation
Я использую этот script:
$(document).ready(function () {
$('.nav li').click(function(e) {
$('.nav li').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
});
Но большинство из них используют preventDefault
, это предотвратит продолжение действия. Таким образом, он не может перейти на контент страницы 3-го уровня.
Если я удалю оператор preventDefault, когда страница загрузит контент Link 3, активный класс вернется к ссылке 1.
Итак, есть ли способ решить эту проблему?