Question

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

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

<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中删除“活动”类并添加脚本以选择默认显示的选项卡来解决此问题。

以下是更新的脚本。

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

使用此脚本，当显示“主页”选项卡时，将触发事件。此外，从其他选项卡导航回来时会触发相同的操作。

Answer 2

就我而言，从事件选项卡中删除active类并在绑定事件后添加.tab('show')可以部分解决问题，但是它没有打开第一个选项卡，而是打开了最后一个选项卡。我的解决方案是删除active类，并将此行添加到javascript中：

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

带有默认选项卡的shown.bs.tab事件无效

2 个答案: