Twitter Bootstrap 选项卡显示事件未在页面加载时触发 [英] Twitter Bootstrap tab shown event not firing on page load

问题描述

在我有 n 个选项卡的页面中，以及以下脚本(coffeescript，我检查了已编译的 javascript，似乎没问题)...

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)

现在，'shown' 事件不会在页面加载时触发，因此对于页面上显示的第一个选项卡，无法处理此问题(即:通过 xhr 加载内容)

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'

...但它没有.

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

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>

有什么线索吗?

推荐答案

尝试让类 active 离开选项卡 <li> 和内容 <div>.show 中的第一行 代码行之一() 方法 如果正在请求的选项卡已经处于活动状态，则进行短路.

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.

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