Masonry js扰乱了Bootstrap选项卡功能

Masonry js is messing with the Bootstrap tab function

本文关键字：选项 功能 Bootstrap 乱了 js Masonry      更新时间：2023-09-26

我在Desandro的Masonry中使用Bootstrap选项卡功能，问题是当我加载页面时，它从第一个选项卡开始半秒钟，然后跳到带有Masonry的选项卡。我想我可以通过一些脚本来解决这个问题，但我对js/jquery太陌生了，无法理解。

我尝试更改脚本代码的顺序，因为在我看来，这就像是页面加载，然后Masonry脚本发生，并强制其选项卡处于活动状态。但无论代码的顺序如何，它仍然会发生

具体来说，我需要的是有人指出我忽略的错误，或者给我一些建议，告诉我如何让页面在加载时保持在第一个选项卡上。

我在这里包含了我的html和js控件，但我也在http://jsfiddle.net/jccarter1990/o15e98ts/3/

提前感谢

<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" role="tab" data-toggle="tab">Gallery</a></li>
	</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>
	var container = document.querySelector('.masonry');
		var msnry;
		// initialize Masonry after all images have loaded
		imagesLoaded( container, function() {
		msnry = new Masonry( container );
		});
	var container = document.querySelector('.masonry');
		var msnry = new Masonry( container, {
		  // options
		  columnWidth: 200,
		  itemSelector: '.masonry.item'
		});
	
	$('#myTab a').click(function (e) {
		e.preventDefault()
		$(this).tab('show')
})
	$(function () {
		$('#myTab a[href="#page-one"]').tab('show')
		$('#myTab a[href="#page-two"]').tab('show')
		$('#myTab a[href="#page-three"]').tab('show')
	})
	
</script>

更新答案：将第一个选项卡和面板设置为活动选项卡：

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')
})

遗漏：

顺便说一句，你不必在jsfiddle中包含标签的bootstrap.js，如果你选中包含bootstrap的框，它就包含了js。如果有其他js要包含，比如masonry.js，请使用外部资源添加它们，而不是将它们粘贴到脚本面板中。这将使人们更容易看到相关代码。

相关文章：