如何在 li 的 twitter bootstrap 中切换活动类？

Question

我有以下将在页面之间切换的标题：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-collapse collapse">
      <form method="post">
        <ul class="nav navbar-nav">
          <li class="active"><a href="active.php">Active Tags</a></li>
          <li><a href="archived.php">Archived Tags</a></li>
        </ul>
      </form>
    </div>
  </div>
</nav>

和下面的 jQuery 来切换点击时的活动 li：

$('.navbar li').click(function(e) {
  $('.navbar li.active').removeClass('active');
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

只有在 e.preventDefault(); 被注释掉时才能在页面之间移动，但是如果没有这一行，活动类切换将无法工作...我是否必须将我的 href's 更改为某种类型的 onclick jQuery function 或 php $_POST在保持active li's 之间切换的同时在页面之间移动的隐藏表单？我是 javascript/html/php 的新手，因此非常鼓励和鼓励尽可能多的细节和推理。

Answer 1

是的，你是对的，e.preventDefault() 只会切换 li 上的活动类并限制锚点执行其操作。

同时，将其更改为 e.stopPropagation() 将允许两个操作自行执行，而无需将其事件通知给父处理程序。

防止事件在 DOM 树中冒泡，防止任何 父处理程序不会收到事件通知。

因此，您可以将其更改为：

$('.navbar li').click(function(e) {
    e.stopPropagation();

    $('.navbar li.active').removeClass('active');
    var $this = $(this);

    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
});

DEMO