使用 jquery/ajax 重新加载 Div 的内容

Question

我有一个页面，我想在单击菜单链接时重新加载 Divs 而不刷新页面，此时我正在使用以下内容，但它不起作用：

$(".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> 链接！

不确定您对“hidemenubook”的含义是什么，但要加载内容，请使用：

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

如果您要在锚点点击上执行此操作，那么：

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

---

更新：

对于可重复使用的版本，您可以进行一些更改。

• 首先，为每个链接赋予相同的类（或将它们放在同一个父级下）
• 其次，给他们一个data- 来链接他们（你已经有了）
• 三、使用类分配handler和数据找到匹配的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);
});