$(document).ready(function() { //定义ID为filter的ul元素中 所有a元素点击事件 $('ul#filter a').click(function() { //当前a的css属性 outLine 等于 none $(this).css('outline', 'none'); //查找ID为filter的ul元素中 带有.current这个类的元素 并移除这个类 $('ul#filter .current').removeClass('current'); //当前a元素的父级元素加入Current这个类 $(this).parent().addClass('current'); //获取当前文本 如有空格使用 - 替换 var filterVal = $(this).text().replace(' ', '-'); //判断如果 当前父级元素的索引是0 那么 ID为Portfolio的ul元素中所有的 类为隐藏的li元素 淡入 并且删除 .Hidden这个类 这个效果就是显示全部 if ($(this).parent().index() == 0) { $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); } //否则 (那也就是不显示全部了,那也就是匹配显示了,那也就是点那个标签显示对应的信息了,那也就是....这里我用了四个 那也就是 在看不懂 那也就是我要跳楼了..) else { //在ID为Portfolio的ul元素中 的所有li元素里 查找 $('ul#portfolio li').each(function() { //如果当前的Class属性 不等于 filterVal(就是点击时那个标签的文本内容) if (!$(this).hasClass(filterVal)) { //用500毫秒隐藏该元素并加入Hidden这个类 //这里也许你会问 既然隐藏了还加个 hidden 这个类干什么?....因为上面显示全部的时候要查找class等于Hidden这个类的元素 //当然你可以换种方式..呵呵 $(this).hide(500).addClass('hidden'); } else { //否则 这里代表当前元素的class属性与 filterval完全匹配 ,那也就是 用1000毫秒(1秒)的时间显示 //并删除hidden这个类了.. hidden这个类是 css文件中定义的 $(this).show(1000).removeClass('hidden'); } }); } return false; }); });