shown.bs.tab 带有默认选项卡的事件不工作

Question

我在我的一个应用程序中使用 bootstrap 选项卡，我遇到了一个挑战，即当页面加载默认活动选项卡时 shown.bs.tab 事件没有被触发。

在下面的代码中，我有一个名为 "Home" 的选项卡，这是一个默认选项卡（已添加活动 class）。在页面加载时，我的 "Home" 选项卡内容完美显示，但挑战是未触发附加到该选项卡的 'shown.bs.tab' 事件。当我导航到 "Menu 1" 选项卡然后返回到 "Home" 选项卡时，会触发相同的事件。

<ul class="nav nav-tabs">
   <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
   <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>

<script>
  $(document).ready(function(){
     $("a[href='#home']").on('shown.bs.tab', function (e) {
       alert('tab shown');
     });
  });
</script>

如何在页面加载时触发此事件？这背后的意图是 "Home" 选项卡的内容是动态的，即显示在选项卡上触发的 Ajax 调用的响应。

Answer 1

通过从 HTML 中删除 "active" class 并将脚本添加到 select 默认显示的选项卡来解决此问题。

下面是更新后的脚本。

<script>
    $(document).ready(function(){
       $("a[href='#home']").on('shown.bs.tab', function (e) {
          alert('tab shown');
       }).tab('show');
    });
</script>

使用此脚本，当显示 "Home" 选项卡时，将触发事件。此外，从其他选项卡返回时也会触发相同的操作。

Answer 2

在我的例子中，从选项卡中删除 active class 并在绑定事件后添加 .tab('show') 部分解决了问题，但不是打开第一个选项卡，而是打开了最后一个。我的解决方案是删除 active class 并将此行添加到 javascript:

$('a[data-toggle="tab"]').first().tab('show');

shown.bs.tab 带有默认选项卡的事件不工作

shown.bs.tab event with default tab is not working

ajax

jquery

bootstrap-tabs

twitter-bootstrap-3