用于更改选项卡的JQuery事件

Question

我正在创建一个在引导中使用导航标签的web应用程序。它有4个导航标签，有不同的标签内容。我的问题是，我想知道nav选项卡做了什么/用户会在这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代码中所做的是，我使用了"onchange“事件，并且每当用户导航到不同的选项卡时，我都想在网站的页面加载上发出警告。但当我测试的时候，警报弹出了四次。有人能告诉我我做错了什么吗？我是不是使用了错误的JQuery事件？

注意:我还想知道用户在四个选项卡中选择了哪些选项卡。而不是"1"，它应该提醒选项卡选择..。

Answer 1

如果您需要在单击不同的选项卡时进行更改和提醒，可以使用小提琴的另一种方法

代码片段：

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

Answer 2

从标记上看，您正在使用引导选项卡，因此请查看选项卡显示事件

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