Question

我已在此处为我的新投资组合网页创建了布局：http://vitaminjdesign.com/work.html

我希望有一个带标签的图例（ALL，徽标设计，营销，网页设计，印刷品设计），当点击这些标签时，页面会过滤结果并显示它们当前显示的内容。首先，我希望显示所有项目，但是当用户点击标签（例如“打印设计”）时，列表会被过滤并显示。

如果我将此作为我的传奇：<a href="#" class="logos">logo</a>

当点击徽标时，我希望所有带有“徽标”类的div都保留，并且所有与其他类的div都会淡出。

jquery中最简单的方法是使这项工作成功。请注意：我对jquery不是很有经验，所以请尽可能彻底和防止白痴。

Answer 1

首先将适用于每个项目的类（logodesign，marketing，webdesign，printdesign）添加到您要为其分配数字类的div中。

然后创建要过滤每个标记的链接，如：

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

然后指定一个点击事件，该事件将隐藏其他事件并显示所选的事件。

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();
}

Answer 2

虽然这不是我问题的直接答案，但我找到了一个关于如何完全实现我想要的教程。它在这里：

http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip

使用jquery创建可排序的投资组合

2 个答案: