Question

我对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>

第一个脚本激活每个标签 - 它正在运行。第二个应该订阅显示的＆＃39; event和e.target应该包含激活的标签的参考。

我收到第一个控制台消息（＆＃34;激活选项卡＆＃34;）但不是第二个。所以我敢打赌，我错过了正确订阅活动的一些内容。

我无法理解的两个问题。为了使这些东西工作，我不能使用j来激活标签但只依赖于bootstrap数据切换项。另一个奇怪的事情只是＆＃39; show＆＃39;事件将触发，显示＆＃39;韩元＆＃39;吨。你知道为什么吗？

Answer 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消息。

bootstrap tabs：订阅一个事件

1 个答案: