将“活动”类添加到与当前单击的菜单链接相同的 href

Question

我有这个菜单结构：

<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 <li><a class="menu-link" href="#day">Day</a></li>
 <li><a class="menu-link" href="#night">Night</a></li>
 <li><a class="menu-link" href="#drinks">Joogid</a></li>
 <li><a class="menu-link" href="#takeaway">Takeaway</a></li>
</ul>

如果单击菜单中的相同href，我想将活动类添加到选项卡，即：

<ul class="nav nav-pills nav-fill" role="tablist">
         <li class="nav-item active">
             <a class="nav-link" data-toggle="tab" href="#day" role="tab">DAY</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" data-toggle="tab" href="#night" role="tab">NIGHT</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" data-toggle="tab" href="#drinks" role="tab">JOOGID<br></a>
         </li>
         <li class="nav-item">
           <a class="nav-link" data-toggle="tab" href="#takeaway" role="tab">takeaway</a>
         </li>
</ul>

我正在使用这段代码，但它似乎并不接近我想要实现的目标：

jQuery(function($) {
    var $anchors = $('.menu-link'),
    $items = $('.nav-link);

    $anchors.on('click', function() {
        var selectedIndex = $anchors.index(this);

        $anchors.removeClass('active').eq(selectedIndex).addClass('active');
        $items.removeClass('active').eq(selectedIndex).addClass('active');
    });
});

如何通过单击下拉菜单中的同一个 href 链接将活动类添加到选项卡并从所有其他选项卡中删除？

任何建议表示赞赏

Answer 1

您可以使用点击触发器，它会执行默认行为（更改选项卡类，并使选项卡处于活动状态），因此您的代码应该是这样的：

jQuery(function($) {
    var $anchors = $('.menu-link'),
    $items = $('.nav-link');

    $anchors.on('click', function() {
        var selectedIndex = $(this).attr('href');
        $items.eq(selectedIndex).find('a').trigger('click');
    });
});

参见下面的 sn-p ：

jQuery(function($) {
  var $anchors = $('.menu-link'),
      $items = $('.nav-item');

  $anchors.on('click', function() {
    var selectedIndex = $anchors.index(this);
    $items.eq(selectedIndex).find('a').trigger('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <li><a class="menu-link" href="#day">Day</a></li>
    <li><a class="menu-link" href="#night">Night</a></li>
    <li><a class="menu-link" href="#drinks">Joogid</a></li>
    <li><a class="menu-link" href="#takeaway">Takeaway</a></li>
  </ul>
</div><br><br><br><br>
<ul class="nav nav-pills nav-fill" role="tablist">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#day" role="tab">DAY</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#night" role="tab">NIGHT</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#drinks" role="tab">JOOGID<br></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#takeaway" role="tab">takeaway</a>
  </li>
</ul>
<div class="tab-content">
  <div id="day" class="tab-pane fade in active">
    <h3>Tab 1</h3>
    <p>Some content.</p>
  </div>
  <div id="night" class="tab-pane fade">
    <h3>Tab 2</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="drinks" class="tab-pane fade">
    <h3>Tab 3</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="takeaway" class="tab-pane fade">
    <h3>Tab 3</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>