Javascript 简单JS过滤器（第一个选项卡处于活动状态+；淡入淡出效果）

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

默认情况下，如何使第一个选项卡处于活动状态？所以我并没有展示所有的内容

单击其中一个选项卡时，是否可以添加简单的淡入/淡出效果

这是我的

HTML

和

JS

：

$（文档）.ready（函数（）{
变量过滤器={}；
//单击“过滤器”分区中的链接时。。。
$（“#过滤器a”）。单击（函数（e）{
e、 预防默认值（）；
过滤器[$（this.parent（）.attr（'class'）]=$（this.attr（'id'）；
var show=$（'#content ul li'）.filter（function（）{
用于（过滤器中的k）
如果(
filters.hasOwnProperty（k）&&
！$（this）.hasClass（过滤器[k]）
)
返回false；
返回true；
});
show.show（）；
$（“#content ul li”）.not（show.hide（）；
$（'pre:first'）.html（JSON.stringify（filters））；
});  
}); 




星期一的内容在这里
周二的内容在这里
周三的内容在这里
周四内容在这里

第一个答案：
您可以使用
$（'#mon'）调用第一个链接的click事件
通过这种方式，您将触发click事件，函数将运行

第二个答案：
jQuery具有
fadeIn（）fadeOut（）
函数。使用它们代替
show（）



jsIDLE:
您可以这样做：

var filters = {};
//when a link in the filters div is clicked...
$('#content ul li').not(':first').hide();
  $('#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;
      });
      $('#content ul li').not(show).hide();
      show.fadeIn();
      $('pre:first').html(JSON.stringify(filters));
  });
});

具有淡入淡出/淡出功能的过滤器
我认为一种更简单的过滤方法是使用（非匿名）函数，您可以从任何地方调用该函数：

var $listToFilter = $('#content ul');    
var $allElements = $listToFilter.find('li');
var filterCache = {};

function filterElements (filterClass) {
    var $elementsToFilter;

    if(filterCache.hasOwnProperty(filterClass)) {
        $elementsToFilter = filterCache[filterClass];
    } else {
        $elementsToFilter = $listToFilter.find('.' + filterClass);
        filterCache[filterClass] = $elementsToFilter;
    }

    $allElements.not($elementsToFilter).hide();
    $elementsToFilter.fadeIn();
}

filterElements('mon');  

对于单击事件，您也可以使用此功能：

$('#filters a').click(function () {
    var filterClass = $(this).attr('id');

    filterElements(filterClass);
});

小提琴手
对于孔示例，请看一看。
完美！非常感谢。请将答案标记为“已接受”答案；）