gpt4 book ai didi

jQuery - MixItUp 更改默认事件选项卡内容

转载 作者:行者123 更新时间:2023-12-01 06:45:13 26 4
gpt4 key购买 nike

我正在使用 jQuery - MixItUp 组合插件。

如何将默认选项卡内容显示为“ Icon Tab 包含相关内容而不是“ All

Tab Active 工作正常,内容没有改变...


Online Demo


jQuery


$(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();


});

HTML


<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 -->

最佳答案

我找到了解决方案,查看 mixitup.js 的源代码,您只需要传递名为 showOnLoad 的对象属性,该属性默认设置为 全部

新版本有不同的属性要设置,

这是示例,[版本1.5.6](这是您的版本)

$('#portfoliolist').mixitup({
showOnLoad : 'icon', // <----- This property
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
});

示例,[版本 2.1.9]

load: {
filter: 'all',
},

Here如果您想了解更多信息,请参阅 v2.1.9 的源代码。

查看下面的示例:图标作为默认过滤器

$(function () {

var filterList = {

init: function () {

// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({

showOnLoad : 'icon',
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();


});
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/layout.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.easing.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.mixitup.min.js"></script>
<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 -->

关于jQuery - MixItUp 更改默认事件选项卡内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32087511/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com