目前在 Bootstrap 3 中,当您使用 Bootstrap 的选项卡导航 Pane 时,“事件”类被放置在 <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 事件将“事件”类添加到 <a>
使用下面的代码的元素,但是我无法从以前的“事件”元素中删除它,也不能阻止“事件”类在 <li>
上仍然发生变化。元素。 是否有一个简单且轻量级的解决方案可以将默认行为从 <li>
中移出给 child <a>
元素?
$('a[data-toggle="tab"]').on('show.bs.tab', function(event) {
$(event.target).addClass('active');
});
最佳答案
与 @Mina Ragaie 评论相反,注意问题内容很重要:
Instead, I am trying to get the "active" class to go on the element,
默认情况下,事件类跟随单击的 li,但如果您想在子 anchor 标记上添加另一个事件类,则需要将事件从“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>
关于javascript - 更改默认 Bootstrap 3 'tabs' 事件类元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45619544/