基于特定链接点击显示/隐藏DIV [英] Show/Hide DIV's based on specific link click

问题描述

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

这里有两个过滤器。请注意，当前选择的类在两个地方添加了一个活动类。

 < div class = > 
< ul class =filters> 
< li class =first active> 
< a class =filterbutton activehref =＃filter>类别1< / a> 
< / li> 
< li class =last> 
< a class =filterbuttonhref =＃filter>类别2< / a> 
< / li> 
< / ul> 
< / div> 
 

当页面加载时，默认情况下类别1处于活动状态，因此我将显示相应的DIV 1。

这里是魔法需要的地方：当上面的过滤器链接被点击时，我想显示/隐藏我加载的两个DIV 。

 < div id =block-1> content< / div> <  - 隐藏这一个。 
 
< div id =block-2> content< / div> <  - 显示这一个。 
  

这也是很重要的，当用户点击回第一个类别，它回到默认

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

解决方案

： http://jsfiddle.net/AU8fX/1/

  $（.filterbutton）.on（click，function（）{
 $（'block'）。toggle b $ b}）; 
  

I have a page that lists a series of content. I then have filters so someone can narrow down their search. I'd like to show/hide a block of information in my sidebar according to the filter that someone has clicked on. Basically clicking on a filter will show/hide these DIV's.

Here are two of the filters. Notice the one that is currently selected has an added class of "active" in two places.

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

When the page loads, Category 1 is active by default so I will show my corresponding DIV "block-1" by default.

Here is where the magic needs to be: When the filter link is clicked on above I would like to show/hide two DIV's that I have loaded.

<div id="block-1">content</div>    <—— Hide this one.

<div id="block-2">content</div> <—— Display this one.

It is also important that when a user clicks back on the first Category that it goes back to the default view of showing just the first block.

UPDATE: It took a long while but I finally figured it out. Using the "duplicate" answer here I tailored it to my needs. I also used some other code to add the necessary "rel" attributes that I needed.

解决方案

You can do this with toggle function : http://jsfiddle.net/AU8fX/1/

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

这篇关于基于特定链接点击显示/隐藏DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！