我正在尝试在我的引导程序模板上加载mixitup筛选器库。
问题是,当我在已激活的第一个选项卡窗格上加载图库时,它工作正常
但是,当我尝试在第二个或第三个选项卡窗格下加载它时,它不起作用,我认为bootstrap .active类之间存在冲突吗?
这是选项卡窗格的主导航菜单
<div class="list-group">
<a href="#landing" role="tab" data-toggle="tab" class="list-group-item active">Home<i class="pull-xs-right fa fa-home"></i></a>
<a href="#about" role="tab" data-toggle="tab" class="list-group-item">About me <i class="pull-xs-right fa fa-star"></i></a>
<a href="#services" role="tab" data-toggle="tab" class="list-group-item">What I do <i class="pull-xs-right fa fa-suitcase"></i></a>
<a href="#portfolio" role="tab" data-toggle="tab" class="list-group-item">Portfolio <i class="pull-xs-right fa fa-photo"></i></a>
<a href="#blog" role="tab" data-toggle="tab" class="list-group-item">Blog <i class="pull-xs-right fa fa-comment"></i></a>
<a href="#contact" role="tab" data-toggle="tab" class="list-group-item">Contact <i class="pull-xs-right fa fa-phone"></i></a>
</div>
这是mixitup画廊
<div role="tabpanel" class="tab-pane fade" id="portfolio">
<nav class="navbar navbar-light bg-faded">
<div class="container">
<ul class="nav navbar-nav" id="filters">
<li class="nav-item"><a class="filter nav-link" data-filter=".plugins, .logo, .web">All</a>
</li>
<li class="nav-item"><a class="filter nav-link" data-filter=".plugins">App / Plugins</a>
</li>
<li class="nav-item"><a class="filter nav-link" data-filter=".logo">Logo Design</a>
</li>
<li class="nav-item"><a class="filter nav-link" data-filter=".web">Web Design</a>
</li>
<li class="nav-item">
<div class="fb-like" data-href="https://facebook.com/ydd.ninja" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</li>
</ul>
</div>
</nav>
<div class="content">
<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="assets/images/bg.jpg" alt="" />
<div class="label">
<div class="label-text">
<a href="#" class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="assets/images/dp2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a href="#" class="text-title">Bird Document</a>
<span class="text-category">Web Design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio plugins" data-cat="plugins">
<div class="portfolio-wrapper">
<img src="assets/images/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a href="#" class="text-title">Bird Document</a>
<span class="text-category">App Design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
</div>
<!--//portfolio-list-->
</div>
</div>
上面的代码将不起作用,但是如果我将其作为首次加载时的活动选项卡窗格,则一切都很好,所有投资组合导航都不会出现问题,并且可以单击并过滤图库
<div role="tabpanel" class="tab-pane fade in active" id="portfolio">
在此先感谢您,希望有人可以帮助我。
最佳答案
找到了解决方案!
这是由于与引导程序选项卡数据切换冲突,所以它不起作用。
解决方法是以下代码
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr('href');
if (target === '#portfolio') {
if (!$('#portfoliolist').mixItUp('isLoaded')) {
$('#portfoliolist').mixItUp({
selectors: {
target: '.portfolio',
filter: '.filter'
},
load: {
filter: 'all' // show app tab on first load
}
});
}
}
});
});
感谢mixitupforum中的这个家伙
关于jquery - mixitup和bootstrap .active类冲突,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37626276/