砌體js搞亂Bootstrap選項卡功能

Question

我在Desandro的砌體中使用Bootstrap選項卡功能，問題是當我加載頁面時，它從第一個選項卡開始半秒鐘，然後跳轉到選項卡與砌體。 我猜測我可以通過一些腳本來解決這個問題，但是我對js/jquery太新以至於無法解決這個問題。

我試着改變腳本代碼的順序，因爲它看起來像我加載頁面，然後發生砌體腳本，並強制其選項卡處於活動狀態。但它仍然會發生，無論代碼的順序如何。

具體而言，我需要的是讓別人指出我忽略的錯誤，或者給我一些關於如何讓頁面停留在第一個選項卡上的指示負載。

我已經包括了我的HTML和js控制這裏，但我也是在http://jsfiddle.net/jccarter1990/o15e98ts/3/

在此先感謝

<ul class="nav nav-pills" role="tablist" id="myTab"> 
 
\t \t <li role="presentation" class="active"><a href="#page-one" role="tab" data-toggle="tab">Cover Letter</a></li> 
 
\t \t <li role="presentation"><a href="#page-two" role="tab" data-toggle="tab">Features</a></li> 
 
\t \t <li role="presentation"><a href="#page-three" role="tab" data-toggle="tab">Gallery</a></li> 
 
\t </ul> 
 

 
<div class="tab-content"> 
 

 
<div role="tabpanel" class="tab-pane active" id="page-one">Cover Letter</div> 
 
    
 
<div role="tabpanel" class="tab-pane" id="page-two">Features</div> 
 
    
 
<div role="tabpanel" class="tab-pane" id="page-three"> 
 
    <div class="masonry js-masonry" > 
 
    <div class="item"><img class="thumbnail" src="img/paigeJohnLasVegas.jpg"></div> 
 
    <div class="item"><img class="thumbnail" src="img/engagementsCloseUp.jpg"></div> 
 
    <div class="item"><img class="thumbnail" src="img/jimmyJohns.jpg"></div> 
 
    <div class="item"><img class="thumbnail" src="img/paigeNinjaTurtle.jpg"></div> 
 
    <div class="item"><img class="thumbnail" src="img/sprayPaintSid.jpg"></div> 
 
    </div> 
 
    </div>

<script> 
 
\t var container = document.querySelector('.masonry'); 
 
\t \t var msnry; 
 
\t \t // initialize Masonry after all images have loaded 
 
\t \t imagesLoaded(container, function() { 
 
\t \t msnry = new Masonry(container); 
 
\t \t }); 
 
\t var container = document.querySelector('.masonry'); 
 
\t \t var msnry = new Masonry(container, { 
 
\t \t // options 
 
\t \t columnWidth: 200, 
 
\t \t itemSelector: '.masonry.item' 
 
\t \t }); 
 
\t 
 
\t $('#myTab a').click(function (e) { 
 
\t \t e.preventDefault() 
 
\t \t $(this).tab('show') 
 
}) 
 

 
\t $(function() { 
 
\t \t $('#myTab a[href="#page-one"]').tab('show') 
 
\t \t $('#myTab a[href="#page-two"]').tab('show') 
 
\t \t $('#myTab a[href="#page-three"]').tab('show') 
 
\t }) 
 

 
\t 
 
</script>

取得與全碼提琴

Answer 1

修訂答：BTW

：設置你的第一個標籤，面板作爲活動標籤：

Fiddle

<div class="container navigation"> <span class="nt-name">John Carter</span> 

<br> <span class="nt-title">Professional Portfolio</span> 

<ul class="nav nav-pills" role="tablist" id="myTab"> 
    <li role="presentation" class="active"><a href="#page-one" role="tab" data-toggle="tab">Cover Letter</a> 

    </li> 
    <li role="presentation"><a href="#page-two" role="tab" data-toggle="tab">Features</a> 

    </li> 
    <li role="presentation"><a href="#page-three" class="active" role="tab" data-toggle="tab">Gallery</a> 

    </li> 
</ul> 
</div> 
<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="page-one"> 
    <div class="container"> 
      <h1>Cover Letter</h1> 

    </div> 
</div> 
<div role="tabpanel" class="tab-pane" id="page-two"> 
    <div class="container"> 
     <h1>Features</h1> 

    </div> 
</div> 
    <div role="tabpanel" class="tab-pane" id="page-three"> 
    <div class="container"> 
      <h1>Gallery</h1> 

    </div> 
    <div class="masonry js-masonry"> 
     <div class="item"> 
      <img class="thumbnail" src="img/paigeJohnLasVegas.jpg"> 
     </div> 
     <div class="item"> 
      <img class="thumbnail" src="img/engagementsCloseUp.jpg"> 
     </div> 
     <div class="item"> 
      <img class="thumbnail" src="img/jimmyJohns.jpg"> 
     </div> 
     <div class="item"> 
      <img class="thumbnail" src="img/paigeNinjaTurtle.jpg"> 
     </div> 
     <div class="item"> 
      <img class="thumbnail" src="img/sprayPaintSid.jpg"> 
     </div> 
    </div> 
</div> 
</div> 

改變你的腳本只是這樣的：

//bootstrap tab function 
$('#myTab a').click(function (e) { 
e.preventDefault() 
$(this).tab('show') 
}) 

漏下，如果選中包含Bootstrap的框，則不必在jsfiddle中包含標籤的bootstrap.js，它包含JS。如果你有其他的js包含，比如masonry.js，可以使用外部資源添加它們，而不是將它們粘貼到腳本面板中。這會讓更多的人看到相關的代碼。