JQuery нажмите на событии бутстраповской 3 вкладки

Question

У меня есть этот код:

 <ul> 
     <li class="active"><a data-toggle="tab" id="one">Tab One</a></li> 
     <li><a data-toggle="tab" id="two">Tab Two</a></li> 
     <li><a data-toggle="tab" id="three">Tab Three</a></li> 
     </ul> 

Я хочу, чтобы захватить событие любого щелчка и оповестить идентификатор вкладки активирован с помощью мыши. Как это делается?

Answer 1

$('a[data-toggle=tab]').click(function(){ 
 
    alert(this.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active"><a data-toggle="tab" id="one">Tab One</a></li> 
 
    <li><a data-toggle="tab" id="two">Tab Two</a></li> 
 
    <li><a data-toggle="tab" id="three">Tab Three</a></li> 
 
</ul>

Answer 2

$("a[data-toggle='tab']").click(function() { 
    alert($(this).attr("id")) 
}); 

Вот jsfiddle

Answer 3

Я хотел бы использовать бутстраповские событий API вместо добавления дополнительных обработчиков кликов

$('.yourTabsClass a').on('show.bs.tab', function(e){ 
    alert('ID clicked = ' + e.target.id) 
}); 

Ссылка: bootstrap tabs docs

DEMO