javascript - 使用 javascript 时超链接变得不可点击

Question

当我使用 JavaScript 突出显示事件链接时，我的 Bootstrap 导航栏不可点击

这是我的代码:

<script type="text/javascript">
          $('.nav.navbar-nav > li').on('click', function (e) {
          e.preventDefault();
          $('.nav.navbar-nav > li').removeClass('active');
          $(this).addClass('active');
          });
</script>

这是我的导航菜单

 <nav class="navbar navbar-inverse navbar-static-top" >
  <div class="container-fluid" >

  <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>

             <a class="navbar-brand" rel="home" href="#" title="Fidel MRP">
                <img style="max-width:85px; margin-top: -18px; background-color: grey;
                     "src="/static/img/Fidel MRP-logo.png">
            </a>
          </div>




  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Dashboard</a></li>
        <li><a href="/customer/home/">Sales</a></li>
        <li><a href="/vendor/home/">Purchase</a></li> 
        <li><a href="/item/category/list/">Inventory</a></li> 
        <li><a href="#">Manufacture</a></li>
        <li><a href="#">Settings</a></li>
        <li class="devider"></li>
    </ul>


<ul class ="nav navbar-nav navbar-right">
  {% if request.user.is_authenticated %}
      <li ><a href="{% url 'auth_logout' %}" %>  {{user}} Logout  </a></li>
  {% else %}
  <li ><a href="{% url 'registration_register' %}" %> Register </a></li>
       {% endif %}
  <li><div class="form">
        {% if not request.user.is_authenticated and not "/accounts/login" in request.get_full_path %}

          <form class='navbar-form navbar-right' method='POST' action='{% url "auth_login" %}'>{% csrf_token %}
              <div class='form-group'>
                  <input type='text' class='form-control' name='username' placeholder='Username' /> 
              </div>
              <div class='form-group'>
                  <input type='password' class='form-control' name='password' placeholder='Password' />
              </div>
              <button type='submit' class='btn btn-default'>Login</button>
          </form>
        {% endif %}
  </li>
</ul>
</div>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

问题是

我使用提供的 JavaScript 来获取 onClick 之后事件菜单项的视觉效果。该脚本有效，但超链接停止工作。(所以我必须禁用该脚本才能导航)

可能是什么原因以及如何解决？

Answer 1

e.preventDefault(); 正在停止 anchor 的默认行为。 (导航到 href)。

删除它将使浏览器在单击时导航到新页面。