2011-12-24 21 views
0

だから私は4つのdivタグを持っていて、IDは - content1です。 content2; content3およびcontent4。 開始時、content1のみが表示され、その他の3つのコンテンツはすべて表示されず、リンク付きメニューが表示されます。#content1#content2#content3#content4
誰かが例えばcontent3のリンクをクリックすると、現在のコンテンツが非表示になり、content3のコンテンツが他のコンテンツと同じように表示されます。divタグに表示/非表示を追加する

私の質問 - 1つの要素で表示/非表示にする方法を知っていますが、2つ以上の要素で何も作成していないので、作成する手助けがありますか?

ロビンの提案@パー
+4

これは基本的にタブを持つメニューです。あなたはそれについてたくさんの投稿を見つけることができるはずです。 – Robin

答えて

1

を、あなたのコンテンツは、クラスのdivを、「コンテンツ」と言うが得られた場合、グループとしてそれらを選択するのは簡単ですし、それらを隠す。同様に、メニューリンクにクラスを指定すると、クリックハンドラをすべて一度に割り当てることができます。だから、:

<a class="menu" href="#content1">Content 1</a> 
<div class="content" id="content1">Some content here</div> 
<!-- and so forth for your other links and divs --> 

<script> 
    $(function() { 
     $("a.menu").click(function() { 
      $("div.content").hide(); 
      $(this.href).show(); 
      return false; 
     }); 
    }); 
</script> 

あなたが本当にスクリプトブロックが問題の要素の後に表示されますが、私は完全を期すためので、ここでやった場合document.readyハンドラ内のコードをラップする必要はありません。

私は上記のあなたのHTMLマークアップに対応していない可能性を実現していますが、実際にあなたのHTMLマークアップを提供しなかったので、あなたが理解していない、この答えに何があるのならば、私は...

を推測しなければなりませんでしたthis one from the jQuery websiteのようないくつかのjQueryチュートリアルを読むことをお勧めします。チュートリアルはStackOverflowの答えの範囲を超えています...

+0

@Sandyの修正をありがとう(申し訳ありませんが、気付かずに編集を上書きしましたが、私はそれに同意します)。 – nnnnnn

+0

こんにちは、 うん、それはすべてが消えて、何も来ていない。ここに私のコードはありますか?http://paste.php.lv/d81d71785c365e3f08904958c0babdd4?lang=php – patiss

+0

@nnnnnn問題ありません、ありがとう... – Sandy