DIVをボタンクリックで動的にロードする最も簡単な方法は？

Question

ここでは比較的簡単な質問があります。

私が必要とするのはこれです。トップに5つのボタンがあり、その下にDIV（最初は非表示）のページが必要です。ボタンをクリックすると、DIV（別のDIV形式）のコンテンツがロードされます。

[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links 

<div id="content"> 
// area for content to be loaded 
</div> 

<div id="content1"> 
//could be a table or image 
</div> 

<div id="content2"> 
//could be a table or image 
</div> 

<div id="content3"> 
//could be a table or image 
</div> 

<div id="content4"> 
//could be a table or image 
</div> 

<div id="content5"> 
//could be a table or image 
</div> 

上記の例では、ユーザーがページを読み込むと、5つのボタンが表示されます。ボタン5を押すと、 "content5" DIVが "content" DIVの中にロードされます。

<div id="content"> 
<div id="content5"> 
</div> 
</div> 

別のボタンを選択すると、その内容が読み込まれます。

jQueryまたは単純なJavaScriptで実現できます。

感謝

Answer 1

すべてのボタンでクリックハンドラをバインドする必要があります。この特定の例におけるスマートな方法は、divがbuttonに属するかどうかを決定するために要素のインデックスを使用することである。

$('button').bind('click', function() { 
    $('div#content').html($('div#content' + ($(this).index()+1)).html()); 
}); 

デモ：http://www.jsfiddle.net/8f8jt/

これは、すべての<button>のノードにクリックイベントハンドラを追加します。クリックすると、現在クリックされているボタン（.index()^help）のインデックスが検索され、この値を使用して、一致する<div>の要素IDを照会します。見つかったら、.html()^helpを使用して値を取得および設定します。

Answer 2

この

$('#button1').click(function() { 
    $("#content").html(("#content1").html()); 
}); 

$('#button2').click(function() { 
    $("#content").html(("#content2").html()); 
}); 

// etc 

この方法では、既存のコンテンツをコピーメイン#content divの中に正しいdiv要素をクリアしてみます。

Answer 3

jQueryUI tabsも使用できますが、追加のスクリプトが必要です。