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

Question

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

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

score 3 · Accepted Answer

给定您的代码，这个 jQuery 函数将起作用。

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

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

您首先需要包含 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();
});

score 0 · Accepted Answer

使用 jQuery，您可以轻松地使链接显示/隐藏 div

$(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'......）

score 0 · Accepted Answer

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

对于其他链接也是如此。只需将替换为#search-tenant链接的id，并将替换.eq(1)为中隐藏元素的位置<div id="row">。

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

3 回答 3