使用按钮过滤 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; }