使用jquery/ajax重新加載Div的內容

Question

我有一個頁面，我想在不刷新我的頁面的情況下重新加載Div，當我點擊菜單鏈接時，此時我正在使用以下內容，但它沒有工作：

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

我的頁面有，我想重裝當我點擊鏈接打開它們4周不同的div：

<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

你試圖內容加載到.hidemenubook4這是<a>鏈接！

不知道你的意思，與所謂的「隱藏 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); 
});