活动的bootstrap选项卡已更改

时间:2013-12-19 05:13:05

标签: javascript jquery twitter-bootstrap

我在bootstrap中有这个标签:

<ul class="nav nav-tabs" id="feedtab">
  <li class="active"><a href="#atlass" data-toggle="tab">Atlass</a></li>
  <li><a href="#avi" data-toggle="tab">Aviation</a></li>
  <li><a href="#proc" data-toggle="tab">Processing</a></li>
  <li><a href="#it" data-toggle="tab">IT&S</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="atlass"><div id="updates" data-id-type="1"><div class="alert alert-default well" style="background-color: #f1f1f1"><i class="fa fa-spinner fa-spin"></i> Portal is Initilizing... Please Wait.</div></div></div>
  <div class="tab-pane" id="avi"><div class="well" style="background-color: lightsteelblue;">Aviation Feed Will go here.</div></div>
  <div class="tab-pane" id="proc"><div class="well" style="background-color: lightsteelblue;">Processing Feed Will go here.</div></div>
  <div class="tab-pane" id="it"><div class="well" style="background-color: lightsteelblue;">IT&S Feed will go here.</div></div>
</div>

如果在更改活动选项卡时,如何在jquery中有事件或事件?

我想在更改活动标签时调用javascript函数。

我已经尝试了这个但是很有效:

<script>

$('#feedtab [data-toggle="tab"]').on('shown.bs.tab', function (e)
{
    alert('test');
})


</script>

1 个答案:

答案 0 :(得分:2)

直接离开the documentation

有两个事件被解雇 show.bs.tab&amp; shown.bs.tab如其名称所示,在显示新内容之前会触发一个,另一个在之后。

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