Перезагрузка содержимого Div с помощью jquery/ajax

Question

У меня есть одна страница, и я бы хотел перезагрузить Divs, не обновляя мою страницу, когда я нажимаю ссылки на меню, в это время я использую следующее, но это не работа:

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

Моя страница имеет 4 различных дивы, что я хочу, чтобы перезагрузить, когда я нажимаю на ссылку, чтобы открыть их:

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

---

Update:

Для многоразовой версии вы можете внести некоторые изменения.

• Во-первых, дать каждому ссылку на тот же класс (или положить их под тем же родителем)
• Во-вторых, дать им data- связать их (которые у вас уже есть)
• В-третьих, используйте класс назначить обработчик и данных, чтобы найти соответствующий Див

например:

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