Javascript 显示/隐藏DIV'；s基于特定的链接单击

我有一个页面列出了一系列的内容。然后我就有了过滤器，这样有人可以缩小搜索范围。我想根据某人单击的过滤器在侧边栏中显示/隐藏一块信息。基本上，单击过滤器将显示/隐藏这些DIV

这里有两个过滤器。请注意，当前选中的一个在两个位置添加了一个“active”类

<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.

---

content对于简单的js和CSS来说，这绝对是可能的，但困难在于让它看起来不那么刺耳。我建议使用jQuery同位素..它不仅适用于布局，还可以很好地处理过滤。如果你在布局上根本不需要它，你也可以使用
你说你的js不太好，让我们看看是否我可以给你足够的线索：

<a class="filterbutton active" data-target="#example" href="#filter">Category 1</a>

通过onclick中的一些代码，您可以非常轻松地切换活动类：

$('.active').removeClass('active');
$(this).addClass('active');

要显示和隐藏元素，请执行以下操作：

$('.SomeElements').hide();
$( specific selector).show();

您可以使用切换功能执行此操作：

你试过的javascript在哪里？你搜索过了吗？不幸的是，我不懂javascript，所以我只能任由那些懂javascript的人摆布。谢谢你的链接。我已经看过了，但我想错过了那一个。谢谢。我真不敢相信你搜索过这个，但在互联网上什么也没找到。@MiljanPuzović你说点建设性的话怎么样tive？你在发布之前阅读一些规则，展示你做过的事情，或者在发布之前搜索这个网站，怎么样？超过20%的问题和答案都是关于jQuery和关于显示/隐藏div的。我尝试过同位素，但它只是不适用于我们现有的网站。所以我希望jQuery可以做一些淡入/淡出。它可以，但效果有点僵硬。这是这个过程的一个基本演示。顺便说一下：他在回答中使用了jQuery库-jQuery。我不太确定你的评论是什么意思，我的代码是jQuery，不是吗？或者你是说第一句话中的
js
？jQuery也是javascript…@Martijn谢谢你的提示。我无法添加链接的数据目标。我只能使用我的CMS提供的。我已经在上面创建了一个JSFIDLE，但显示/隐藏不起作用。如果你能告诉我如何进行这项工作，我将不胜感激。谢谢你的建议，但我在切换中遇到的问题是，用户可以再次单击链接，它将被删除。我只希望它被删除当他们点击另一个链接时删除。
$('.SomeElements').hide();
$( specific selector).show();

$( ".filterbutton" ).on( "click", function() {
    $('.block').toggle();
});