Я предполагаю, что вы хотите перезагрузить только определенный раздел страницы, а не всю страницу, верно? Если это так, вот как вы можете это сделать:
ШАГ 1: Создайте пустой / пустой контейнер для перезагружаемого раздела, о котором идет речь. Ваш файл index.html должен выглядеть примерно так:
<div id="wrapper">
<!--menu-->
<a class="section-1">Section 1 </a>
<a class="section-2">Section 2 </a>
<a class="section-3">Section 3</a>
<!--menu-->
<!--reloadable-section-->
<div id="reload">
</div>
<!--reloadable-section-->
</div>
ШАГ 2. Создайте необходимые перезагружаемые разделы в отдельных файлах HTML и сохраните их там, где считаете нужным. Для целей этого примера они будут сохранены в том же каталоге, что и файл index.html. Таким образом, ваши файлы section-1.html, section-2.html и section-3.html будут содержать всю необходимую информацию / контент. Обратите внимание, что если вы используете Dreamweaver для создания файла HTML, теги разметки HTML, теги BODY и HEAD будут автоматически вставлены для вас - удалите эти теги, поскольку они вам не нужны в данном случае. Вместо этого немедленно создайте элементы div, необходимые для хранения вашего контента. Ваш файл должен выглядеть примерно так:
<div id="section-1">
<h2>this is section-1</h2>
<p>this is the content for section 1</p>
</div>
ШАГ 3: Вернитесь к файлу index.html и включите следующий jQuery:
<script>
$(document).ready(function(){
$('.section-1').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-1.html');
});
$('.section-2').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-2.html');
});
$('.section-3').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-3.html');
});
});
</script>
Так что, просто выполнив это, вы сможете загрузить нужный файл в указанный контейнер вашего HTML-файла без перезагрузки всего HTML-файла. Обратите внимание, что если вы хотите, чтобы section-1.html имел эффект затухания при загрузке, это то, что вы можете сделать:
<script>
$('#section-1').fadeTo(500,1);
</script>
<div id="section-1">
<h2>this is section-1</h2>
<p>this is the content for section 1</p>
</div>
Да, это так просто - просто добавьте упомянутый jQuery, как указано выше, и контейнер содержимого в загружаемых файлах исчезнет при готовности документа. Конечно, не забудьте установить непрозрачность указанного div в 0 с помощью CSS. РЕДАКТИРОВАТЬ: обратите внимание, что для этого экземпляра вам не нужно "$ (document) .ready (function () {});" на все.
Исходя из личного опыта, я бы вообще воздерживался от использования iFrames, если только это не является абсолютно необходимым. Это просто потому, что есть несколько стилистических сложностей с iFrames, которые могут быть настоящим кошмаром, особенно если высота родительского div должна наследоваться от количества дочернего контента, находящегося в нем.
PS: Я не слишком уверен, может ли этот метод быть строго помечен как загрузка AJAX, но я резервирую его для тех, кто знает, чтобы пролить свет на это. Извините, я просто программист-самоучка, поэтому мои знания весьма ограничены.