引导3 jquery事件的活动标签更改

我花了不切实际的时间试图触发一个函数，当引导3选项卡/导航栏的选项卡更改和字面上所有建议谷歌吐出来是错误的/不工作。

怎么做呢?

元编辑:见评论

346811 次浏览
小开 
$(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');
}
});

问题是attr('href')从来不是空的。

或者比较#id = "#some value"，然后调用ajax。

小开

这对我很管用。

$('.nav-pills > li > a').click( function() {
$('.nav-pills > li.active').removeClass('active');
$(this).parent().addClass('active');
} );
小开

感谢@Gerben的帖子，我知道有两个事件show.bs.tab(在标签显示之前)和show.bs.tab(在标签显示之后)，就像文档中解释的那样——Bootstrap Tab usage

如果我们只对特定的选项卡感兴趣，并且可能添加单独的函数而不必在一个函数中添加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');
});

演示< a href = " http://jsfiddle.net/msanjdev/1f1prmyo/embedded/result/ " > < / >

小开
最佳答案 

$('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>

小开

要添加到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');
}


});

我希望这能帮助到一些人

小开

我用另一种方法。

只是试着找到所有a，其中id从某个< em >子字符串< / em >开始。

JS

$('a[id^=v-photos-tab]').click(function () {
alert("Handler for .click() called.");
});

超文本标记语言

<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>
小开

引导5标签类似于Gerben Rampaart的答案。只是与文档中当前标签HTML的一些差异:

$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).data("bs-target") // activated tab
alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>


提交答案