jquery/ajaxを使用してDivのコンテンツをリロードする

Question

私はページを1つしか持っていません。メニューリンクをクリックするとDivsを再読み込みせずに再読み込みしたいのですが、現時点では次のものを使用していますが、作品：

$(".hidemenubook4").load(location.href + " #book4"); 

マイページでは、私はそれらを開くためのリンクをクリックしたときにリロードしたい4つの異なるdivを持っている：あなたは<a>ある.hidemenubook4にコンテンツをロードしようとしている

<a class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a> 
<a class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/> 
<a class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);"><span class="namebook3origin">Book3</span></a><br/>  
<a class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);" onClick="parent.jQuery.fancybox.close();"><span class="namebook4origin">Book4</span></a><br/> 

<div id="book1"><div class="thumbnails"> 
    <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a> 
    ... 
</div></div> 
<div id="book2"><div class="thumbnails"> 
    <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a> 
    ... 
</div></div> 
<div id="book3"><div class="thumbnails"> 
    <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a> 
    ... 
</div></div> 
<div id="book4"><div class="thumbnails"> 
    <a class="fancyboxgallerybook4" data-fancybox-group="book4" href="http://www.domaine.com/wp-content/uploads/book0/4.jpg" title=""><img class="fancyboxthumbnailsgallerybook4" src="http://www.domaine.com/wp-content/uploads/book4/07.jpg" alt=""/></a> 
    ... 
</div></div> 

Answer 1

をリンク！

ないあなたは「隠す menubook」と呼ばれるものに関係するのではなく、コンテンツをロードするために、使用何を意味するか確認してください：あなたは、その後、アンカークリックでこれを行うには意味場合

$("#book4").load(location.href + " #book4"); 

：

$(".hidemenubook4").click(function() { 
    $("#book4").load(location.href + " #book4"); 
}); 

---

更新：

再利用可能なバージョンでは、いくつかの変更を加えることができます。

• まず、それぞれが同じクラスをリンク（または同じ親の下に置く）を得
• 第二、第三
• （あなたがすでに持っている）それらをリンクするために彼らにdata-を与える、にクラスを使用します例えば、一致するdiv要素に

を見つけるために、ハンドラとデータを割り当てる：

<a class="hidemenubook" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);"><span class="namebook1origin">Book1</span></a> 
<a class="hidemenubook" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);"><span class="namebook2origin">Book2</span></a><br/> 

その後：

$(".hidemenubook").click(function() { 
    var book = "#" + $(this).data("fancybox-group"); 
    $(book).load(location.href + " " + book); 
}); 

の