用于活动选项卡更改的 Bootstrap 3 jquery 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20705905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 jquery event for active tab change
提问by Gerben Rampaart
I spent an unrealistic amount of time trying to fire a function when the tab changes of the bootstrap 3 tab/navbar and literally allsuggestions google spat out were wrong/did not work.
当引导程序 3 选项卡/导航栏的选项卡更改时，我花了不切实际的时间来尝试触发一个功能，并且实际上谷歌吐出的所有建议都是错误的/不起作用。
How to go about this?
如何解决这个问题？
Meta-edit: see comment
元编辑：见评论
回答by Gerben Rampaart
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
});<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
home tab!
</div>
<div class="tab-pane fade" id="profile">
profile tab!
</div>
</div>回答by Florin
$(function () {
$('#myTab a:last').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
if ((target == '#messages')) {
alert('ok');
} else {
alert('not ok');
}
});
the problem is that attr('href') is never empty.
问题是 attr('href') 永远不会为空。
Or to compare the #id = "#some value" and then call the ajax.
或者比较#id = "#some value" 然后调用ajax。
回答by msanjay
Thanks to @Gerben's post came to know there are two events show.bs.tab (before the tab is shown) and shown.bs.tab (after the tab is shown) as explained in the docs - Bootstrap Tabusage
多亏@Gerben 的帖子才知道有两个事件 show.bs.tab（显示选项卡之前）和 show.bs.tab（显示选项卡之后），如文档中所述 - Bootstrap Tab用法
An additional solution if we're only interested in a specific tab, and maybe add separate functions without having to add an if - else block in one function, is to use the a href selector (maybe along with additional selectors if required)
如果我们只对特定选项卡感兴趣，并且可能添加单独的函数而不必在一个函数中添加 if - else 块，则另一种解决方案是使用 a href 选择器（如果需要，可以与其他选择器一起使用）
$("a[href='#tab_target_id']").on('shown.bs.tab', function(e) {
console.log('shown - after the tab has been shown');
});
// or even this one if we want the earlier event
$("a[href='#tab_target_id']").on('show.bs.tab', function(e) {
console.log('show - before the new tab has been shown');
});
回答by Jaylen
To add to Mosh Feu answer, if the tabs where created on the fly like in my case, you would use the following code
要添加到 Mosh Feu 答案中，如果在我的情况下动态创建选项卡，您将使用以下代码
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
var tab = $(e.target);
var contentId = tab.attr("href");
//This check if the tab is active
if (tab.parent().hasClass('active')) {
console.log('the tab with the content id ' + contentId + ' is visible');
} else {
console.log('the tab with the content id ' + contentId + ' is NOT visible');
}
});
I hope this helps someone
我希望这可以帮助别人
回答by Patrick D Rittenhouse
This worked for me.
这对我有用。
$('.nav-pills > li > a').click( function() {
$('.nav-pills > li.active').removeClass('active');
$(this).parent().addClass('active');
} );
回答by Developer
I use another approach.
我使用另一种方法。
Just try to find all awhere idstarts from some substring.
只需尝试查找从某个substring开始的所有a位置。id
JS
JS
$('a[id^=v-photos-tab]').click(function () {
alert("Handler for .click() called.");
});
HTML
HTML
<a class="nav-item nav-link active show" id="v-photos-tab-3a623245-7dc7-4a22-90d0-62705ad0c62b" data-toggle="pill" href="#v-photos-3a623245-7dc7-4a22-90d0-62705ad0c62b" role="tab" aria-controls="v-requestbase-photos" aria-selected="true"><span>Cool photos</span></a>
