将“活动”类添加到与当前单击的菜单链接相同的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

您可以使用click触发器，它将执行默认行为（更改tab类，并使tab处于活动状态），因此您的代码应该如下所示：

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');
    });
});

请参阅下面的代码段：

null

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>