Twitter Bootstrap标签显示的事件不会在网页加载时触发 [英] Twitter Bootstrap tab shown event not firing on page load

问题描述

在我有标签的网页中，以及以下脚本（coffeescript，我检查了编译的JavaScript，它似乎没关系）...

  $  - > 
 init（）
 
 init =  - > 
 $（'a [data-toggle =tab]'。）on'shown'，（event） - > 
 shown = event.target 
 console.log（显示标签：+显示）
  

$ b b

现在，网页载入时，「显示」事件无法启动，因此网页上显示的第一个分页无法处理这个问题（例如：透过xhr载入内容）

我尝试将此添加到上述脚本中，以查看是否可以手动触发它：

  $ （'a [data-toggle =tab]：first'）。tab'show'
  

...但它没有。

这是我在我的视图中使用的HTML代码

 < div class =tabbable> 
< ul class =nav nav-tabs> 
< li class =active> 
< a href =＃updatesdata-toggle =tab><％= t：updates，：scope => 'user.profile.sections'％>< / a> 
< / li> 
< li class => 
< a href =＃activitydata-toggle =tab><％= t：activity，：scope => 'user.profile.sections'％>< / a> 
< / li> 
< li class => 
< a href =＃articlesdata-toggle =tab><％= t：articles，：scope => 'user.profile.sections'％>< / a> 
< / li> 
< / ul> 
 
< div class =tab-content> 
< div class =tab-pane activeid =updates> 
 
< / div> 
< div class =tab-paneid =activity> 
 
< / div> 
 
< div class =tab-paneid =articles> 
 
< / div> 
 
< / div> 
< / div> 
  

任何线索？

解决方案

尝试将活动离开< li> code>< div> 。 show（）中的第一个代码行

jsfiddle.net/FStGU/\"> JSFiddle

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...

$ ->
    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)

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

<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?

解决方案

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.

JSFiddle

这篇关于Twitter Bootstrap标签显示的事件不会在网页加载时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！