2

関連するリンクがクリックされたときにのみ非表示のdivを表示する必要があります。私は答えを探しているいくつかのフォーラムに参加していますが、まだ自分で質問をしています。私はFoundationGridSystemを使用していますが、javascript/jqueryに関する知識はほとんどありません。与えられた助けを事前に感謝します。

マークアップを表示するには、次のリンクをたどってください： http ://simplicitdesignanddevelopment.com/TENANT%20REP%20ZURB/tenant_reputations_home.html

4

3 に答える 3

3

コードを考えると、この jQuery 関数は機能します。

デモ

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

同じリンクを 2 回クリックすると、段落が非表示になります。それがあなたが望むものでない場合は、 、または、または...に置き換え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();
});​

別のデモ

于 2012-10-06T01:27:49.827 に答える
0

jQueryを使用すると、リンクでdivを簡単に表示/非表示にすることができます

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

});

またはトグルを使用して、表示/非表示を切り替えることができます:

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

});

（少なくとも今は8つと数えました'div#row div'...）

于 2012-10-05T22:32:48.217 に答える
0 
$("#search-tenant").click(function(e){
   $("#row div").eq(1).show();
   e.preventDefault();
});

他のリンクについても同様です。をリンク#search-tenantの に置き換え、 を内の隠し要素の位置に置き換えるだけです。id.eq(1)<div id="row">

ただし、これにはリンク以外の別のタイプの要素を使用することをお勧めします。リンクの目的を果たさないリンクを作成する場合...では、なぜそれを使用するのでしょうか?

于 2012-10-05T22:32:52.590 に答える