Question

所以，我使用Tabs，但出于某种原因，当我把pinterest放入标签内容时，它并没有显示出来。 JsFiffle here

在他们之外工作正常，但不会在标签内加载。

Answer 1

许多第三方JS驱动的库，例如Google Maps，以及显然Pinterest的feed嵌入JS，在JS库中隐藏的HTML容器上初始化时，无法正常工作已初始化（所以换句话说，如果你在页面加载时将Pinterest提要放在活动的标签中，它应该有用）。

我设法绕过这个问题如下：

HTML代码段

            <!-- Nav tabs -->
            <ul id="social-feed-tabs" class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#Instagram" aria-controls="Instagram" role="tab" data-toggle="tab">Instagram</a></li>
                <li role="presentation"><a href="#Pinterest" aria-controls="Pinterest" role="tab" data-toggle="tab" id="PinterestTab">Pinterest</a></li>
                ...
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Instagram">...</div>
                <div role="tabpanel" class="tab-pane" id="Pinterest">
                    <a data-pin-do="embedUser" href="http://www.pinterest.com/username/" data-pin-scale-width="80" data-pin-scale-height="170" data-pin-board-width="360">Loading Pinterest feed...</a>
                </div>
                ...
            </div>

JS代码

var isPinterestLoaded = false;

function handlePinterest() {
    $('#PinterestTab').click(function () {
        loadPinterestJs();
    });

}

function loadPinterestJs() {
    if (!isPinterestLoaded) {
        (function (d) {
            var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
            p.type = 'text/javascript';
            p.async = true;
            p.src = '//assets.pinterest.com/js/pinit.js';
            f.parentNode.insertBefore(p, f);
        }(document));
        isPinterestLoaded = true;
    }
}

handlePinterest(); // You may want to call this on the document.ready event, or similar, depending on your setup.

Pinterest和bootstrap选项卡

1 个答案: