jquery点击bootstrap 3选项卡上的事件

jquery click event on bootstrap 3 tabs

本文关键字：事件 选项 点击 bootstrap jquery      更新时间：2023-09-26

我有这个代码：

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

我想捕捉任意选项卡单击事件，并提醒被单击激活的选项卡的id。这是怎么做到的？

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

我将使用引导程序事件API，而不是添加额外的点击处理程序

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

参考：引导选项卡文档

DEMO

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

这是jsfiddle

相关文章：