Question

我正在创建一个在bootstrap中使用nav-tabs的Web应用程序。它有4个导航标签，具有不同的标签内容。我的问题是，我想知道用户在4个选项卡中选择或点击的导航标签是什么/用户，每次用户点击其他标签时都应该更改，但我不知道应该使用哪个JQuery事件。这是html代码：

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab" class="select-tab">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab" class="select-tab">Tab2</a></li>
    <li><a href="#tab3" data-toggle="tab" class="select-tab">Tab3</a></li>
    <li><a href="#tab4" data-toggle="tab" class="select-tab">Tab4</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
       //tab1 contents...
    </div>
    <div class="tab-pane" id="tab2">
       //tab2 contents...
    </div>
    <div class="tab-pane" id="tab3">
       //tab3 contents...
    </div>
    <div class="tab-pane" id="tab4">
       //tab4 contents...
    </div>
</div>

这里是JQuery代码：

$('.select-tab').on("change",function(){
    alert("1");
}).change();

我在JQuery代码中所做的是我使用＆＃34; onchange＆＃34;事件和，我想提醒网站的页面加载和每次用户导航到不同的选项卡。但是当我测试它时，警报弹出四次。谁能告诉我我做错了什么？我使用了错误的JQuery事件吗？

注意：我还想知道用户选择了哪四个标签。而不是＆＃34; 1＆＃34;，它应该提醒选择的标签..

Answer 1

从标记开始，看起来您正在使用引导标签，因此请查看tabs show event之类的

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Answer 2

如果您需要更改并提醒点击不同的标签，这是您可以使用Fiddle

的另一种方法

代码段：

$('.nav-tabs > li > a').on("click",function(e){
    e.preventDefault();
    alert(1);
});

用于更改选项卡的JQuery事件

2 个答案: