jQuery-MixItUp更改默认活动选项卡内容
我正在使用jQuery-MixItUp组合插件 如何将默认选项卡内容显示为带有相关内容的“jQuery-MixItUp更改默认活动选项卡内容,jquery,mixitup,Jquery,Mixitup,我正在使用jQuery-MixItUp组合插件 如何将默认选项卡内容显示为带有相关内容的“图标选项卡”，而不是“全部”” 活动选项卡工作正常，因为内容没有更改 jQuery HTML 全部 应用程序 卡片 图标 标志 网 鸟类文献 标志 视觉信息图 应用程序 索诺设计 网页设计 印刷公司 名片 威瑟莱特 应用程序 BMF 名片 泰克利昂 名片 基特皮克 标志 图形绘制 应用程序 快速反应 名片 摩比短袜 标志 乡村社区教堂 标志 多米诺比萨饼 偶像 后端管理员 网页设计 一款图片
图标选项卡”，而不是“全部”
”
活动选项卡工作正常，因为内容没有更改
jQuery
HTML
- 全部
- 应用程序
- 卡片
- 图标
- 标志
- 网
鸟类文献
标志
视觉信息图
应用程序
索诺设计
网页设计
印刷公司
名片
威瑟莱特
应用程序
BMF
名片
泰克利昂
名片
基特皮克
标志
图形绘制
应用程序
快速反应
名片
摩比短袜
标志
乡村社区教堂
标志
多米诺比萨饼
偶像
后端管理员
网页设计
一款图片分享应用
偶像
学生指南
网页设计
斯考克
偶像
三维地图
偶像
笔记
网页设计
本土设计师
标志
书虫
标志
三明治
偶像
现实
名片
特产酒店
标志
我找到了解决方案，查看了mixitup.js
的源代码，您只需要传递名为showOnLoad
的对象属性，默认设置为all
较新版本要设置不同的当前属性
以下是示例，[版本1.5.6
]（这是您的版本）
是v2.1.9
的源代码，如果您想进一步挖掘
查看下面的示例：图标作为默认过滤器
$（函数（）{
变量过滤器列表={
init：函数（）{
//MixItUp插件
// http://mixitup.io
$（“#portfoliolist”）.mixitup({
showOnLoad:“图标”，
targetSelector:“.portfolio”，
筛选器选择器：'.filter'，
效果：[“褪色”]，
“啪”的一声，
//打电话给t
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
<div class="container">
<ul id="filters" class="clearfix">
<li><span class="filter" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app">App</span></li>
<li><span class="filter" data-filter="card">Card</span></li>
<li><span class="filter active" data-filter="icon">Icon</span></li>
<li><span class="filter" data-filter="logo">Logo</span></li>
<li><span class="filter" data-filter="web">Web</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Sonor's Design</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Typography Company</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Weatherette</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">BMF</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Techlion</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">KittyPic</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Graph Plotting</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">QR Quick Response</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/6.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Mobi Sock</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/7.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Village Community Church</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Domino's Pizza</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Backend Admin</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Instagram</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Student Guide</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Scoccer</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">3D Map</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Note</a>
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Native Designers</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/4.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bookworm</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio icon" data-cat="icon">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Sandwich</a>
<span class="text-category">Icon</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/3.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Reality</a>
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/2.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Speciallisterne</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
</div>
</div><!-- container -->
$('#portfoliolist').mixitup({
showOnLoad : 'icon', // <----- This property
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
});
load: {
filter: 'all',
},