0

我对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'不会。你知道为什么吗？

4

1 回答 1

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在控制台中看到您的消息。

于 2013-01-08T21:54:24.643 回答