javascript - 简单的 JS 过滤器(第一个选项卡事件 + 淡入淡出效果)

Question

我有一个非常简单的内容过滤器，但我需要两个小东西来改进它:

1. 如何让第一个选项卡默认处于事件状态？所以我不会显示所有内容。

2. 有没有办法可以在单击其中一个选项卡时添加简单的淡入/淡出效果？

这是我的 HTML 和 JS:

$(document).ready(function(){  
    var filters = {};
    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){  
        e.preventDefault();  
        filters[$(this).parent().attr('class')] = $(this).attr('id');  
        var show = $('#content ul li').filter(function(){ 
            for(k in filters)
                if(
                   filters.hasOwnProperty(k) &&
                   !$(this).hasClass(filters[k])
                )
                return false;
            return true;
        });
        show.show();
        $('#content ul li').not(show).hide();
        $('pre:first').html(JSON.stringify(filters));     
    });  
}); 

<div id='filters'>
<p class="f1" >
    <a href='#' id='mon'>Monday</a>
    <a href='#' id='tue'>Tuesday</a>
    <a href='#' id='wed'>Wednesday</a>
    <a href='#' id='thur'>Thursday</a>
    <a href='#' id='allitems'>All</a>
</p>
</div>  


    <div id='content'>  
        <ul>  
            <li class='mon allitems'>monday content goes here</li>  
            <li class='tue allitems'>tuesday content goes here</li>  
            <li class='wed allitems'>wednesday content goes here</li>  
            <li class='thur allitems'>thursdaycontent goes here</li>   
        </ul>  
</div>  

Answer 1

第一个答案: 您可以使用 $('#mon').click(); 调用第一个链接的点击事件，这样您将触发点击事件并运行该函数。

第二个答案: jQuery 具有fadeIn() fadeOut() 函数。使用它们代替 show()

http://api.jquery.com/fadein/

http://api.jquery.com/fadeout/

Jsfiddle:https://jsfiddle.net/py3ezk9y/