目前在Bootstrap 3中,当您使用Bootstrap的标签导航窗格时,"active“类被放在<li>
元素上,如下所示:
<ul class="nav navbar-nav">
<li class="active"><a href="#A" data-toggle="tab">A</a></li>
<li><a href="#B" data-toggle="tab">B</a></li>
<li><a href="#C" data-toggle="tab">C</a></li>
</ul>
相反,我尝试让“活动”类进入<a>
元素,如下所示:
<ul class="nav navbar-nav">
<li><a class="active" href="#A" data-toggle="tab">A</a></li>
<li><a href="#B" data-toggle="tab">B</a></li>
<li><a href="#C" data-toggle="tab">C</a></li>
</ul>
我可以使用下面的代码通过Bootstrap JavaScript事件将"active“类添加到<a>
元素,但是我无法将它从以前的"active”元素中删除,也不能阻止"active“类在<li>
元素上继续更改。有没有一种简单而轻量级的解决方案来将缺省行为从 <a>
元素移动到子元素?
$('a[data-toggle="tab"]').on('show.bs.tab', function(event) {
$(event.target).addClass('active');
});
发布于 2017-08-11 01:05:46
与@Mina Ragaie评论相反,关注问题内容是很重要的:
相反,我试图让“活动”类在元素上运行,
默认情况下,活动类跟随单击的li,但如果您想在子锚标记上添加另一个活动类,则需要将事件从'show.bs.tab‘更改为'shown.bs.tab’。添加行:
$(this).closest('.nav').find('.active').removeClass('active');
以便移除任何活动的已添加类。
在下面的代码片段中,有一个证据:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(event) {
$(this).closest('.nav').find('.active').removeClass('active');
$(event.target).addClass('active');
}).first().trigger('shown.bs.tab');
a.active {
background-color: blue !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav">
<li class="active"><a href="#A" data-toggle="tab">A</a></li>
<li><a href="#B" data-toggle="tab">B</a></li>
<li><a href="#C" data-toggle="tab">C</a></li>
</ul>
https://stackoverflow.com/questions/45619544
复制相似问题