使用按钮过滤Div

Question

我正在开发一个网站，它更像是一个时间轴。

这是链接： http://isitimeline.zz.mu/informatika/index.html

我需要一些JavaScript（或其他任何你想到的）解决方案来按颜色过滤时间轴div。我们需要4个按钮，一个用于“全部显示”，一个用于每种颜色（红色，绿色和蓝色）。 例如。我点击红色按钮，只显示“红色”div，所有其他div都被隐藏。

感谢您的帮助。

Answer 1

我的div会像

<div class="content-div green">
</div>
<div class="content-div red">
</div>

等

然后我会使用jQuery添加删除隐藏的类，例如：

$('#button-green').click(function {
    $('.green').removeClass('hidden');
    $('.red').addClass('hidden');
})

$('#button-show-all').click(function {
    $('.content-div').removeClass('hidden');
})

最后隐藏类的CSS将是：

.hidden{ display: none; }