更改默认Bootstrap 3‘tab’活动类元素
更改默认Bootstrap 3‘tab’活动类元素
提问于 2017-08-11 00:58:27
目前在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');
});回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45619544
复制相关文章
相似问题