如何在单击链接时显示隐藏的div

Question

我需要在点击相关链接时才显示隐藏的div。我一直在几个论坛上寻找答案，但我自己也提出了这个问题。我正在使用Foundation Grid System，对javascript / jquery知之甚少。提前感谢您提供的帮助。

要查看标记，请点击以下链接：http://simplicitdesignanddevelopment.com/TENANT%20REP%20ZURB/tenant_reputations_home.html

Answer 1

鉴于你的代码，这个jQuery函数将起作用。

Demo

var links = $('.links a');
links.on('click',function(){
    var n = links.index(this);
    $('.row > div:not(.links)').eq(n).toggle();
});​

第二次点击同一链接将隐藏该段落。如果不是您想要的，请将toggle()替换为show()，或fadeIn()或slideDown() ...

您最初需要include jQuery，对吗？ ; - ）

---

如果您在实际布局中无法实现上述功能，请替换此部分代码：

<div class="row">
<div>Content to be shown when the first link is clicked</div>
/* ...etc... */

这一个：

<div class="row" id="rowTarget">
<div>Content to be shown when the first link is clicked</div>
/* ...etc... */

和我的功能：

var links = $('.links a');
links.on('click',function(){
    var n = links.index(this);
    $('#rowTarget > div').eq(n).toggle();
});​

<强> Another demo

Answer 2

使用jQuery，您可以轻松地创建链接show / hide divs

$(function(){
   $('a#resources').click(function(){
       $('div#row div').eq(8).show();
   });

});

或使用切换，您可以显示/隐藏它：

 $(function(){
   $('a#resources').click(function(){
       $('div#row div').eq(8).toggle();
   });

});

（至少现在我把它算作八'div#row div' ...）

Answer 3

$("#search-tenant").click(function(e){
   $("#row div").eq(1).show();
   e.preventDefault();
});

同样适用于其他链接。只需将#search-tenant替换为链接的id，将.eq(1)替换为<div id="row">内隐藏元素的位置。

但是，我建议您使用其他类型的元素，而不是链接。如果您的链接不符合链接的目的......那么为什么要使用它呢？