2009-12-03 67 views
0

排序组合我创建的布局为我的新投资组合的网页浏览:http://vitaminjdesign.com/work.html创建使用jQuery

我想有标签(ALL,标志设计,营销,网页设计,平面设计),当这些传奇标签被点击,页面过滤结果并显示它们,就像它们当前显示的一样。首先,我希望显示所有项目,但是当用户点击标签(例如“打印设计”)时,该列表将被过滤并显示。

如果我有这个作为我的传说:<a href="#" class="logos">logo</a>

,并点击徽标时,我希望所有的div的与类“标识”的留下来,所有与其他类的div的淡出。

什么是最简单的方式在jQuery中使这项工作。请注意:我对jquery不是很有经验,所以请尽可能彻底和防白痴。

+0

我发现这个,这和我想要的非常相似。我将努力使用此: http://www.askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html – JCHASE11 2009-12-04 00:34:57

回答

2

首先将适用于每个项目的类(logodesign,marketing,webdesign,printdesign)添加到您指定数字类的div中。

然后创建是要筛选就像每个标签链接:

<a href='#' class="logodesign">Logo Design</a> 

然后分配一个click事件,将隐藏在他人和显示选定的一个。

var $projects = $('#projects'); 
$('a.logodesign').click(function() { 
    hideAll(); 
    showTag('logodesign'); 
}); 
function showTag(tag){ 
    $projects.find('div.'+tag).stop(true).fadeIn(); 
} 
function hideAll(){ 
    $projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut(); 
} 
+0

非常感谢。我会尝试。我进入脚本(下面),出现错误,我在这里做错了什么? <脚本类型= “文本/ JavaScript的”> $(文件)。就绪(函数(){ \t \t \t \t \t \t \t $变种项目= $( '#项目'); \t $(” a.logodesign ')点击(函数(){ \t \t hideAll(); \t \t showTag(' logodesign'); \t}); \t功能showTag(标签){ \t \t $幻灯cts.find( 'div中。' +标签)停止(真).fadeIn(); \t} \t功能hideAll(){ \t \t $ projects.find( 'div.logodesign,div.marketing,div.webdeisgn,div.preintdesign')淡出(); \t} }); – JCHASE11 2009-12-03 23:04:21

+0

请看我上面编辑的问题 – JCHASE11 2009-12-03 23:10:03

+0

遗憾的是有一个失踪。在停止命令之前。我已经更新了答案中的代码 – PetersenDidIt 2009-12-04 02:30:59