jquery - twitter bootstrap 示例博客显示事件 : nav a

Question

我正在使用 Twitter Bootstrap 的博客示例，其导航如下所示:

<div class="blog-masthead">
  <div class="container">
    <nav class="blog-nav">
      <a class="blog-nav-item" href="/one">Three</a>
      <a class="blog-nav-item" href="/two">Three</a>
      <a class="blog-nav-item" href="/three">Three</a>
    </nav>
  </div>
</div>

我的想法是通过查询显示事件链接:

<script>
  $(document).ready(function(){
    $('nav a').click(function (e){
      e.preventDefault(); 
      $('nav a').removeClass('active');
      $(this).addClass('active');
    });
  });
</script>

但现在我的链接不再可点击。显示事件选项卡。该怎么办？

Answer 1

e.preventDefault (event.preventDefault) 的作用是防止与您正在监听的元素关联的默认行为。 anchor 的默认行为是导航到某个地方。

因此，您的链接将不再触发页面更改。删除 e.preventDefault() 语句，您的链接将再次工作。

但是，你的想法确实存在一个根本问题。 JavaScript 将无法执行您想要的操作，因为导航到新页面意味着重置页面的状态。就好像你的 JavaScript 从未运行过:(