多个导航上的活动类设置和使用jquery删除

时间:2018-06-18 08:05:03

标签: jquery navigation

您好我正在尝试创建一个脚本,该脚本将在标记上添加活动类,并删除ul中的其他内容。

它现在有效,但是当我有多个导航时,它会切换它们。 那么我如何才能使它只针对当前的ul li项目?

我的工作示例代码:https://codepen.io/andrelange91/pen/JZOawY

我的Html:

<div class="row">
  <div class="col-12">
    <div class="smallNav activeNav">
      <ul role="tablist" class="nav nav-pills nav-pills-primary">
        <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
          <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link active" aria-expanded="true">
            Profile
          </a> 
        </li> 
        <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
          <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
            Settings
          </a>
        </li>
        <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
          <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
            Options
          </a>
        </li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="largeNav activeNav">

    <ul role="tablist" class="nav nav-pills nav-pills-primary flex-column">
      <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
        <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link active" aria-expanded="true">
          Profile
        </a>
      </li>
      <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
        <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
          Settings
        </a>
      </li>
      <li data-toggle="tab" role="tablist" aria-expanded="true" class="nav-item active">
        <a data-toggle="tab" role="tablist" href="#undefined" class="nav-link">
          Options
        </a>
      </li>
    </ul>
  </div>
</div>

我正在处理的脚本:

$('.activeNav li a').click(function(e) {
    e.preventDefault();
    $('.activeNav ul').find('a').removeClass('active');
    $(this).addClass('active');
});

1 个答案:

答案 0 :(得分:1)

使用以下

Me.Cursor = Cursors.AppStarting