Question

我的侧边栏导航链接未激活。它被激活1秒钟，然后再次重置为非活动状态。我为此尝试了以下jQuery：

$(".nav a p").on("click", function() {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

我的侧面条形码导航项是

 <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fa fa-dashboard"></i>
              <p>
                Dashboard
                <i class="right fa fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{{route('home')}}" class="nav-link">
                  <i class="fa fa-circle-o nav-icon"></i>
                  <p>Main</p>
                </a>
              </li>
            </ul>
             </li>
            <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
                <i class="nav-icon fa fa-book"></i>
              <p>
                Posts
                <i class="right fa fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="{{route('posts.index')}}" class="nav-link">
                  <i class="nav-icon fa fa-book"></i>
                  <p>All Posts</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>    
      </nav>

我无法弄清楚jquery有什么问题。任何帮助将不胜感激。

Answer 1

为什么要删除“活动”类，然后使用该jquery再次添加它？对我来说真的没有意义。由于您要删除活动类，因此它变得不活动。

Answer 2

您应该真正在听锚点而不是段落。为了这个演示，我使用e.preventDefault()来防止超链接更改URL。您将要删除它。另外，为了提高效率，我使用了事件委托，如果/当菜单缩放时，它可以带来更好的性能。

事件委托是指使用事件传播的过程（冒泡）在DOM中比在更高级别处理事件事件发生的元素。 source

$(".nav-sidebar").on("click", ".nav-link", function(e) {
  e.preventDefault();
  $(".nav-link").removeClass("active");
  $(this).addClass("active");
});

.active {
  background-color: yellow;
}

.nav-link {
  display: inline-block;
}

.nav-link p {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="mt-2">
  <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
    <li class="nav-item has-treeview menu-open">
      <a href="#" class="nav-link active">
        <i class="nav-icon fa fa-dashboard"></i>
        <p>
          Dashboard
          <i class="right fa fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treevhttps://jsfiddle.net/tro45vLx/3/#tidyiew">
        <li class="nav-item">
          <a href="{{route('home')}}" class="nav-link">
            <i class="fa fa-circle-o nav-icon"></i>
            <p>Main</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fa fa-book"></i>
        <p>
          Posts
          <i class="right fa fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{route('posts.index')}}" class="nav-link">
            <i class="nav-icon fa fa-book"></i>
            <p>All Posts</p>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

jsFiddle

Answer 3

$(".nav a.nav-link").on("click", function(e) {

    if($(this).attr('href') == '#'){
        // href url is not specified, assuming its an ajax call 
        // If not you can remove this
        e.preventDefault();
    }
    // Remove all active classes
    $('.nav .nav-link').removeClass('active');

    // Add active class for the current item
    $(this).addClass("active");
});

Aboce代码会监听a href链接并相应地管理类切换。

使用jQuery的补充工具栏Nav Link Active

3 个答案: