同じスペースの異なるブロックをフェードイン/アウトする正しい方法

Question

私は、画面の横方向に水平に配置されたボタンの集まりを、それらのボタンの下に、さまざまな種類のコンテンツを表示したい場所にします。たとえば、「伝記」という名前のボタンがあり、それをクリックすると、伝記のテキストが入っているブロックが消えてしまいます。「ピクチャ」をクリックすると、伝記ブロックがフェードアウトし、ピクチャブロックはフェードイン

私が現在持っている解決策は（そして私が間違っていると知っている）次のとおりです。

+---------------------+ 
|      | 
|  biography  | 
|      | 
+---------------------+ 
|      | 
|  pictures  | 
|   ...   | 

私は私のスタイルシートにdisplay: noneにそれらすべてを設定し、ボタンがクリックされたときに、私はフェードアウト：私のボタンの下に、私はこのように、私が表示したい別のブロックに対応する行を持つテーブルを持っていますすべての行と私は表示したいものに消えます。それはきれいではないし、おそらく最善の方法ではありません。

ここで私が持っているjQueryのコードです：コード#projectsで

var blocks = [ 
    "projects-fade", 
    "blog-fade", 
    "online-fade", 
    "resume-fade" 
] 

$("#projects").click(function() 
{ 
    // Fade out all blocks 
    $.each(blocks, function() 
    { 
     $("#" + this).fadeOut(100); 
    }) 
    // Fade in the correct block 
    $("#projects-fade").fadeIn(300); 
}); 
// the code above is repeated for each button 

は「プロジェクト」という名前のボタンで、blocksは下のスペースに表示されるすべてのテキストコンテナのIDを含む配列でありますボタン。コード内に表示されているように、#projectsをクリックすると、すべてのブロックがフェードアウトし（開いていてスペースを占める場合）、関連するブロック（この場合は#projects-fade）がフェードします。

どのようにすればよいでしょうか？

Answer 1

コンテナ内のすべてのボタン/リンクを既に持っていない場合は、divの中に入れ、IDをmenuにします。その後、あなたの "ブロック"と同じことをしますが、その容器にID blocksを与えます。それを行うの場合は、これにあなたのjQueryのコードを変更：

$("#menu a").click(function() 
{ 
    // Assuming the buttons have the same id's as the blocks, minus "-fade" 
    var blockID = $(this).attr("id") + "-fade"; 

    // Fade out the active block 
    $("#blocks .active-block").fadeOut(300, function() 
    { 
     $(this).removeClass("active-block"); 

     // Fade in the new block 
     $("#" + blockID).addClass("active-block"); 
     $("#" + blockID).fadeIn(600); 
    });   
}); 

それはあなたの現在のコードに似ていますが、AJAXを使用しない場合、それはかなりあなたがすることができるすべてです。