我有这样的菜单结构：
<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链接点击在下拉菜单？
欢迎任何建议
您可以使用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>