Pinterest和引导标签

Question

因此，我使用的是Tabs，但是由于某些原因，当我在标签内容中放入pinterest时，它不会显示。 JsFiffle在这里

在它们外面可以正常工作，但不会在标签内加载。

.

Answer 1

许多第三方JS驱动的库（例如Google Maps，显然是Pinterest的供稿嵌入JS）在初始化JS库时隐藏的HTML容器上初始化时无法正常工作（因此，换句话说，如果您将Pinterest提要放在页面加载时处于活动状态的标签中， 则它应该可以正常工作）。

我设法解决了这个问题，如下所示：

1. 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> 

2. 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.