jQuery.load() получить страницу DIV по идентификатору в якорной ссылке

Question

У меня есть следующие в моем меню навигации:

<ul> 
    <li><a href="#" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="#" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

который вызывает JQuery:

<script type="text/javascript"> 
    $("#folio1").click(function() { 
     $('#folioWrap').load('folio1.html'); 
    }); 

    $("#folio2").click(function() { 
     $('#folioWrap').load('folio2.html'); 
    }); 
</script> 

Это должно обновить DIV # folioWrap, но сейчас он просто отображается пустым. Итак, у меня есть 2 вопроса:

1 - Есть ли фундаментальная проблема с тем, что у меня здесь, что вызывает загрузку пустой страницы?

2 - Есть ли способ, которым я могу написать jQuery, так что мне нужен только один экземпляр и вместо этого можно передать всю информацию из привязки? Таким образом, у меня могло бы быть огромное количество ссылок, которые ссылаются на разные страницы вместо создания jQuery ref для каждого из них?

Answer 1

Я думаю, что вы забыли OnLoad событие JQuery?

Что я хотел бы сделать, это создать свои якоря теги, которые вы хотите загрузить Ajax с некоторыми CSS класса. Там, вероятно, случаи, когда вы не хотят изменить folioWrap содержание (например: открытие внешней ссылке)

<ul> 
    <li><a href="folio1.html" class="load"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" class="load"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script type="text/javascript"> 
    $(function(){ 
     $("a.load").click(function (e) { 
      e.preventDefault(); 
      $("#folioWrap").load($(this).attr("href")); 
     }); 
    }); 
</script> 

Answer 2

Я думаю, что часть вашей проблемы может заключаться в том, что вы запускаете ее на локальном компьютере (и пытаетесь получить доступ к локальному файлу через .load(), что может иногда вызвать проблемы. Другая причина может заключаться в том, что HTML-файл является полным ., в результате чего ваши проблемы браузера рендеринга (например, если он имеет другой head, и т.д.) Вы можете загрузить только часть вашей страницы, выполнив:

$("#element").load("file.html #divName"); 

что касается использования идентификатора, а не дублировать код, вы можете сделать это:

$("a").click(function() { 
    $('#folioWrap').load(this.id + '.html'); 
}); 

Answer 3

Вы можете сохранить URL в атрибуте href:

<ul> 
    <li><a href="folio1.html" id="folio1"><img src="img1.jpg" border="0" /></a></li> 
    <li><a href="folio2.html" id="folio2"><img src="img2.jpg" border="0" /></a></li> 
</ul> 

<script> 
$("#folio1, #folio2").click(function (e) { 
    $('#folioWrap').load($(this).attr("href")); 
    e.preventDefault(); 
}); 
</script> 

Это имеет то преимущество, что он не нарушает вкладки, и он по-прежнему работает с отключенным JavaScript. (Оба эти «преимущества» предполагают, что это не выглядит полностью неисправна folio1.html или folio2.html появляться сами по себе.)

Что касается вашего первого вопроса с load не работает, посмотрите на jQuery .load() not working in Chrome