Javascript Twitter Bootstrap 选项卡显示的事件未在页面加载时触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11754705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap tab shown event not firing on page load
提问by sixpounder
In a page where I have ntabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
在我有n 个选项卡和以下脚本的页面中（coffeescript，我检查了编译的 javascript，它似乎没问题）...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
现在，'shown' 事件不会在页面加载时触发，因此对于页面上显示的第一个选项卡，无法处理此问题（即：通过 xhr 加载内容）
I tried adding this to the above script, to see if triggering it manually could work:
我尝试将其添加到上述脚本中，以查看手动触发它是否可行：
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
......但它没有。
This is the HTML code I use in my 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>
Any clue?
有什么线索吗？
回答by merv
Try leaving the class activeoff both the tab <li>and the content <div>. One of the first lines of code in the show()methodis to short-circuit if the tab being requested is already active.
尝试将课程active从选项卡<li>和内容中移除<div>。该show()方法中的第一行代码之一是在请求的选项卡已经处于活动状态时进行短路。
JSFiddle
JSFiddle
回答by Diego Marcolan
You can trigger the event manually when you tell the page to show the tab:
当您告诉页面显示选项卡时，您可以手动触发事件：
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
回答by 4lberto
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
我认为您正在混合 Bootstrap Javascript Toggable 选项卡和由类和 ID 管理的基本选项卡
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
如果您想使用 Javascript 来管理选项卡，您应该从 LI 元素上的锚点中删除 data-toggle="tab"，如下所示：http: //getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
您可以将语法与基本选项卡进行比较：http: //getbootstrap.com/2.3.2/components.html#navs
