$(function () {
$('#container').mixItUp({
layout: {
display: 'block'
},
controls: {
toggleFilterButtons: false,
toggleLogic: 'or'
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<head>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#rest"> Menu 1</a></li>
<li><a data-toggle="tab" href="#retail">Menu 2</a></li>
</ul>
<div class="tab-content">
<!-- REMOVE THIS TAB PANE MIXITUP will WOrk-->
<div id="rest" class="tab-pane fade in" >
<br>
<ul class="nav nav-tabs">
<li class="active">
<a href="#full" data-toggle="tab">Full Service</a>
</li>
<li>
<a href="#quick" data-toggle="tab">Quick Service</a>
</li>
<li>
<a href="#catering" data-toggle="tab">Catering</a>
</li>
</ul>
<div class="tab-content">
<div id="full" class="tab-pane active fade in">
<ul class="filters btns">
<li><a href="#" class="filter" data-filter=".hotel">Hotel</a></li>
<li><a href="#" class="filter" data-filter=".cafe">Cafeteria</a></li>
<li><a href="#" class="filter" data-filter=".dining">Dining</a></li>
</ul>
<div id="container">
<div class="mix col-md-3 hotel">Row 1</div>
<div class="mix col-md-3 hotel cafe">Row 2</div>
<div class="mix col-md-3 cafe dining">Row 3</div>
<div class="mix col-md-3 dining hotel">Row 4</div>
<div class="mix col-md-3 cafe">Row 5</div>
</div>
</div>
<div id="quick" class="tab-pane fade in">
Quick Service
</div>
<div id="catering" class="tab-pane fade in">
Catering
</div>
</div>
</div>
<div id="retail" class="tab-pane fade in">
Second tabe
</div>
</div></body></html>
有人请帮助我找到此错误
-> MixIt Up不适用于CSS选项卡
如果我们删除选项卡窗格,我会工作
有人请为这个问题找到解决方案
请从代码中找到此注释并删除选项卡窗格类,然后MixItUp将起作用
tab-pane是Bootstrap中的一类。
最佳答案
我前一段时间遇到了同样的问题。将Bootstrap选项卡与MixItUp一起使用时似乎出现了一些问题。我真的不知道为什么,但是我设法找到了解决方案。
像这样修改您的JavaScript ...
$(document).ready(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$('#container').mixItUp({
layout: {
display: 'block'
},
controls: {
toggleFilterButtons: false,
toggleLogic: 'or'
}
});
});
});
说明:
$(‘a [data-toggle =“ tab”]’)行询问您单击的href,并告诉您在调用show.bs.tab函数时,将执行其余代码。
您可以进一步自定义mixitup,并对不同的选项卡具有多个过滤器逻辑。
为此,您可以使用target属性。
var target = $(e.target).attr('href');
if (target === '#full'){
/* filter loginc */ }
我在MixItUp论坛上找到了这个答案。有关更多信息,请单击here。