引导选项卡：订阅事件答案

【问题标题】：bootstrap tabs: subscribe to an event引导选项卡：订阅事件
【发布时间】：2012-12-14 17:45:21
【问题描述】：

我对js的了解非常有限。我已经阅读了官方文档和网络上的几个主题。我还是有一些问题。我需要以编程方式显示选项卡，因为在显示选项卡时我必须执行一些操作。

根据 twitter bootstrap 文档，这里有一小段代码：

    <ul id="tabs" class="nav nav-tabs">
        <li><a href="#state">State</a></li>
        <li><a href="#graph">Graph</a></li>
        <li><a href="#setup">Setup</a></li>
    </ul>
    <div class="tab-content">
        <div id="state" class="tab-pane fade">
        </div>
        <div id="graph" class="tab-pane fade">
        </div>  
        <div id="setup" class="tab-pane fade">
        </div>
    </div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$('#tabs a').click(function (e) {
  e.preventDefault();
  console.log("Activating a tab");
  $(this).tab('show');
})

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

第一个脚本激活每个选项卡 - 它正在工作。第二个应该订阅 'shown' 事件，并且 e.target 应该包含激活选项卡的引用。

我收到第一条控制台消息（“激活选项卡”），但没有收到第二条消息。所以我敢打赌，我缺少正确订阅活动的一些东西。

我无法理解的两个问题。为了让这些东西正常工作，我不能使用 js 来激活选项卡，而只能依赖引导数据切换项。另一个奇怪的事情是只有'show'事件会触发，'shown'不会。你知道为什么吗？

【问题讨论】：

您可以编辑您的问题并在那里添加更新。我已经为您完成了此操作，但将来最好更新您的问题而不是添加评论，除非回复其他用户

标签： javascript events twitter-bootstrap tabs

【解决方案1】：

您需要将data-toggle="tab" 添加到您的链接中。所以你的第一部分应该重写如下

<ul id="tabs" class="nav nav-tabs">
    <li><a data-toggle="tab" href="#state">State</a></li>
    <li><a data-toggle="tab" href="#graph">Graph</a></li>
    <li><a data-toggle="tab" href="#setup">Setup</a></li>
</ul>

那么您应该可以在控制台中看到您的Tab activated 消息。

【讨论】：