Question

感谢您的回答，抱歉忘记发布我想要显示的类别的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");

})
});

Answer 1

尝试这样：我已经更改了ID，因此它们适合-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');
        }
    });
});

Answer 2

试

$(".filter ul li").click(function(){
  $(".filter ul li").hide();
  $(this).show("fast", "linear");
 });

Answer 3

只需隐藏所有类别并显示您点击的类别：

$(document).ready(function() {

 $(".filter ul li").click(function() {
    $(".filter ul li").hide("fast", "linear"); 
    $(this).show("fast", "linear"); 
}) 

});

Answer 4

你可以先用hide（）隐藏一切;之后，您将显示单击的元素。

$("yourlement").click(function(){
  $("yourelement").hide();
  $(this).show();
 });

Answer 5

嘿试试这个作为你的剧本。

$(document).ready(function () {
    $('div.filter>ul>li').click(function() {
        $('div.filter>ul>li').hide();
        $(this).show();
    });
});

Answer 6

你可以先用hide（）隐藏一切;之后你会显示点击的元素。

$("your_element").click(function(){
  $("your_element").hide();
  $(this).show();
 });

Answer 7

如果您在HTML中进行一些更改，我想我可以通过3个步骤提供一种简单的方法。

第1步）更改完整类别的li项目的ID（digi为digital，aud为audio，...）

第2步）添加到每个类别包装另一个类category-all。因此，例如，.category-audio元素现在将具有另一个类category-all。

第3步）用这个替换你的jquery方法：

$("div.filter.group ul li").click(function(){
    $(".category-all").hide("fast", "linear");
    $(".category-" + this.id).show("fast", "linear");
});

使用jQuery显示/隐藏项目组合项

7 个答案: