使用 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> link!

不确定您要对名为“hidemenubook”的东西做什么，但要加载内容，请使用：

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

如果您打算在锚点点击时执行此操作，则：

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

更新：

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

首先，给每个 link 相同的 class（或将它们放在同一父项下）
其次，给他们 data- 到 link 他们（你已经有）
第三，使用class分配处理程序和数据来找到匹配的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);
});

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

Reload the content of a Div using jquery/ajax

html

javascript

ajax

jquery

reload