JQuery改變標籤的事件

Question

我正在創建一個在引導中使用導航標籤的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代碼做的是，我用「的onchange」事件，我想在頁面加載提醒每次用戶瀏覽到不同的標籤。但是當我測試它時，警報會彈出四次。誰能告訴我我做錯了什麼？我使用錯誤的JQuery事件嗎？

注意：我想知道用戶選擇了四個選項卡中的哪一個。而不是「1」時，應提醒..選擇的選項卡

Answer 1

如果您需要更改和警報在這裏不同的選項卡的點擊是另一種方法，你可以利用Fiddle

代碼片斷：

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

Answer 2

從標記，它看起來像您使用的引導標籤所以看tabs show event像

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