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);
});

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

1 个答案: