Question

我的网页上有可在视图之间切换的标签页。 Preview

问题是，当页面加载时，它会加载所有标签中的所有信息。

我希望在用户切换标签时加载标签内容。

当前代码：

<div class="row-fluid">
    <div class="span12">
        <div class="tabbable">
            <ul class="nav nav-tabs" id="Tabs">
                <li class="active">
                <a href="#tab1-1" data-toggle="tab">TEXT1</a>
                </li>
                <li>
                <a href="#tab2-1" data-toggle="tab">TEXT2</a>
                </li>
                <li>
                <a href="#tab3-1" data-toggle="tab">TEXT3</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1-1">
                    <img src="http://colmenarviejo.info/IMG/BANNER_300X300.jpg" style="width: 300px; height: 300px;" data-src="holder.js/300x200" alt="300x200" class="img-polaroid">
                </div>
                <div class="tab-pane" id="tab2-1">
                    <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=40.614474,-111.926758&amp;num=1&amp;t=m&amp;ie=UTF8&amp;ll=40.609782,-111.936264&amp;spn=0.156382,0.205307&amp;z=11&amp;output=embed">
                    </iframe>
                </div>
                <div class="tab-pane" id="tab3-1">
                    <dl class="dl-horizontal">
                        <dt>City</dt>
                        <dd>Av. 1</dd>
                        <dt>Tel</dt>
                        <dd>(000)123456789</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

Javascript（Plugin）：

$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target // activated tab
    e.relatedTarget // previous tab
})

当用户点击标签时，我应该如何开始加载内容？

Answer 1

您可以使用jQuery .load()将内容加载到选定的窗格中，然后在内容成功加载后显示窗格。

示例：http://www.bootply.com/63891

使用jQuery加载选项卡内容

1 个答案: