Question

我有一个列出一系列内容的页面。然后我有过滤器，所以有人可以缩小他们的搜索范围。我想根据有人点击过滤器在我的侧边栏中显示/隐藏一大堆信息。基本上单击过滤器将显示/隐藏这些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.

同样重要的是，当用户点击第一个类别时，它会返回到仅显示第一个块的默认视图。

更新：花了很长时间，但我终于明白了。在这里使用“重复”答案我根据自己的需要量身定制。我还使用了一些其他代码来添加我需要的必要“rel”属性。

Answer 1

这对于简单的js和CSS来说绝对是可能的，但是障碍是让它看起来不那么刺耳。我建议使用jQuery同位素。 http://isotope.metafizzy.co。它不仅适用于布局，它还可以很好地处理过滤。如果您根本不需要布局，也可以使用https://mixitup.kunkalabs.com

Answer 2

您可以使用切换功能执行此操作：http://jsfiddle.net/AU8fX/1/

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

Answer 3

你说你的JS不是那么好，让我们看看能不能给你足够的线索：

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

Html5具有数据组属性。我写了目标，但你可以在那里放任何东西，它可以用于你的公正代码。

点击后即可获得：

$('.filterbutton').on('click', function(){
    // do something with the click
    alert( $(this).data('target') ); // I alert it, you van use this as a selector
}):

您可以使用onclick中的一些代码轻松切换活动类：

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

显示和隐藏元素：

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

根据特定的链接点击显示/隐藏DIV

3 个答案: