使用jQuery显示/隐藏项目组合项
使用jQuery显示/隐藏项目组合项
提问于 2014-03-07 10:19:41
谢谢你的回答，很抱歉忘记贴出我想要显示的类别的HTML！
它在Wordpress中，所以单击ul li#digi显示数字类别--只要认为jquery可以简化。
<div class="post-12 portfolio type-portfolio status-publish hentry category-digital">
<h3>Ogilvie Homes</h3>
</div>
<div class="post-13 portfolio type-portfolio status-publish hentry category-audio">
<h3>BBC News</h3>
</div>等
因此，要确认单击li#将显示相应的div，如下所示。
<div class="filter group">
<ul>
<li id="all">All</li>
<li id="digi">Digital</li>
<li id="social">Social Media</li>
<li id="print">Print</li>
<li id="aud">Audio</li>
<li id="pub">PR</li>
<li id="cm">Content Marketing</li>
</ul>
</div>//jQuery
$(document).ready(function() {
$("#all").click(function() {
$(".category-digital").show("fast", "linear");
$(".category-social-media").show("fast", "linear");
$(".category-print").show("fast", "linear");
$(".category-audio").show("fast", "linear");
$(".category-pr").show("fast", "linear");
$(".category-content-marketing").show("fast", "linear");
}),
$("#digi").click(function() {
$(".category-digital").show("fast", "linear");
$(".category-social-media").hide("fast", "linear");
$(".category-print").hide("fast", "linear");
$(".category-audio").hide("fast", "linear");
$(".category-pr").hide("fast", "linear");
$(".category-content-marketing").hide("fast", "linear");
})
$("#social").click(function() {
$(".category-social-media").show("fast", "linear");
$(".category-audio").hide("fast", "linear");
$(".category-print").hide("fast", "linear");
$(".category-digital").hide("fast", "linear");
$(".category-pr").hide("fast", "linear");
$(".category-content-marketing").hide("fast", "linear");
})
$("#print").click(function() {
$(".category-print").show("fast", "linear");
$(".category-social-media").hide("fast", "linear");
$(".category-audio").hide("fast", "linear");
$(".category-digital").hide("fast", "linear");
$(".category-pr").hide("fast", "linear");
$(".category-content-marketing").hide("fast", "linear");
})
$("#aud").click(function() {
$(".category-audio").show("fast", "linear");
$(".category-social-media").hide("fast", "linear");
$(".category-print").hide("fast", "linear");
$(".category-digital").hide("fast", "linear");
$(".category-pr").hide("fast", "linear");
$(".category-content-marketing").hide("fast", "linear");
})
$("#pub").click(function() {
$(".category-pr").show("fast", "linear");
$(".category-social-media").hide("fast", "linear");
$(".category-print").hide("fast", "linear");
$(".category-digital").hide("fast", "linear");
$(".category-audio").hide("fast", "linear");
$(".category-content-marketing").hide("fast", "linear");
})
$("#cm").click(function() {
$(".category-content-marketing").show("fast", "linear");
$(".category-social-media").hide("fast", "linear");
$(".category-print").hide("fast", "linear");
$(".category-digital").hide("fast", "linear");
$(".category-pr").hide("fast", "linear");
$(".category-audio").hide("fast", "linear");
})
});回答 7
Stack Overflow用户
回答已采纳
发布于 2014-03-07 10:26:57
尝试这样做:我已经更改了it，以便它们适合-category标题。
<div class="filter group">
<ul>
<li id="all">All</li>
<li id="digital">Digital</li>
<li id="social-media">Social Media</li>
<li id="print">Print</li>
<li id="audio">Audio</li>
<li id="pr">PR</li>
<li id="content-marketing">Content Marketing</li>
</ul>
</div> 而不是使用以下js脚本：
$(document).ready(function () {
$('.li').click(function () {
$('[class^=category-]').hide('fast','linear');
var id = $(this).attr('id');
if(id == 'all') {
$('[class^=category-]').show('fast','linear');
} else {
$('.category-'+id).show('fast','linear');
}
});
});Stack Overflow用户
发布于 2014-03-07 10:22:03
试一试
$(".filter ul li").click(function(){
$(".filter ul li").hide();
$(this).show("fast", "linear");
});Stack Overflow用户
发布于 2014-03-07 10:23:26
只需隐藏所有类别并显示单击的类别：
$(document).ready(function() {
$(".filter ul li").click(function() {
$(".filter ul li").hide("fast", "linear");
$(this).show("fast", "linear");
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22247348
复制相关文章
相似问题
腾讯云开发者
