在我有n 个选项卡的页面中,以及以下脚本(coffeescript,我检查了已编译的javascript,它似乎没问题)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
现在,'shown' 事件不会在页面加载时触发,因此对于页面上显示的第一个选项卡,无法处理此问题(即:通过 xhr 加载内容)
我试着将它添加到上面的脚本中,看看手动触发它是否可行:
$('a[data-toggle="tab"]:first').tab 'show'
...但它没有。
这是我在 View 中使用的 HTML 代码
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#updates" data-toggle="tab"><%=t :updates, :scope => 'user.profile.sections'%></a>
</li>
<li class="">
<a href="#activity" data-toggle="tab"><%=t :activity, :scope => 'user.profile.sections'%></a>
</li>
<li class="">
<a href="#articles" data-toggle="tab"><%=t :articles, :scope => 'user.profile.sections'%></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
有什么线索吗?
最佳答案
尝试离开类 active
关闭两个选项卡 <li>
和内容<div>
.第一个lines of code in the show()
method如果请求的选项卡已经处于事件状态,则短路。
JSFiddle
关于javascript - Twitter Bootstrap 选项卡显示事件未在页面加载时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11754705/