jquery - 如何在点击链接时显示隐藏的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