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>

我想捕获任何标签点击事件，并提醒单击激活标签的ID。这是怎么做到的？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我会使用bootstrap事件API而不是添加额外的点击处理程序

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

参考：bootstrap tabs docs

的 DEMO

Answer 3

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

这是jsfiddle

在bootstrap 3选项卡上的jquery click事件

3 个答案: