<分区>
标签 javascript jquery html css
<分区>
我有一个列出一系列内容的页面。然后我有过滤器，所以有人可以缩小他们的搜索范围。我想根据某人点击的过滤器在我的侧边栏中显示/隐藏一 block 信息。基本上单击过滤器将显示/隐藏这些 DIV。
这是两个过滤器。请注意，当前选中的那个在两个地方添加了“事件”类别。
<div class="container">
<ul class="filters">
<li class=“first active>
<a class="filterbutton active" href="#filter">Category 1</a>
</li>
<li class=“last”>
<a class="filterbutton" href="#filter">Category 2</a>
</li>
</ul>
</div>
当页面加载时，类别 1 默认处于事件状态，因此我将默认显示相应的 DIV “block-1”。
这里是神奇的地方:当点击上面的过滤器链接时，我想显示/隐藏我加载的两个 DIV。
<div id="block-1">content</div> <—— Hide this one.
<div id="block-2">content</div> <—— Display this one.
同样重要的是，当用户点击返回第一个类别时，它会返回到仅显示第一个 block 的默认 View 。
更新:花了很长时间，但我终于弄明白了。在此处使用“重复”答案，我根据自己的需要对其进行了定制。我还使用了一些其他代码来添加我需要的必要“rel”属性。
最佳答案
这对于简单的 js 和 CSS 绝对是可能的，但是障碍在于如何让它看起来不刺耳。我建议使用 jQuery 同位素。 http://isotope.metafizzy.co .它不仅适用于布局，还可以很好地处理过滤。如果您根本不需要它进行布局，您也可以使用 https://mixitup.kunkalabs.com
关于javascript - 根据特定链接点击显示/隐藏 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22874339/