我正在使用灵活的模板 http://the8guild.com/themes/html/flexy/v1.7/stylesPage.html（使用引导程序）并且我无法让选项卡上的 shown.bs.tab 事件正常工作。
我已经成功让它发挥作用JSFiddle http://jsfiddle.net/st8h6a92/.
这是我在模板中使用的代码，但没有产生任何结果：
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert(e.target.href);
})
});
</script>
我能错过什么？如果我将此代码复制/粘贴到 Flexy 代码上，它将不起作用。要了解问题所在，需要采取哪些步骤？谢谢 ！
引导选项卡事件 http://getbootstrap.com/javascript/#tabs-events是基于.nav-tabs元素，而不是.tab-content元素。因此，为了利用 show 事件，您需要带有指向的 href 的元素#tab1，不是#tab1内容元素本身。
所以代替这个：
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
改为这样做：
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
或者，要捕获所有这些，只需执行以下操作：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
堆栈片段中的演示
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
