Вы можете использовать технику, известную как "AHAH" Асинхронный HTML и HTTP. По сути, вы делаете JQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
Вы можете заключить это в функцию как:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
Это позволит загрузить содержимое страницы «frame» в div без перезагрузки страницы.
Вы также можете привязать к каждой из ссылок навигации и использовать их HREF в качестве пути для загрузки в ваш контент div, например:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
Сложение:
Ваше меню может выглядеть так:
<ul class="myMenu">
<li><a href="frame1.html" class="menuLink">Frame 1</a></li>
<li><a href="frame2.html" class="menuLink">Frame 2</a></li>
</ul>
Кроме того,
Если вы хотите, чтобы он запоминал страницу, на которой вы находитесь, вы можете использовать куки или #anchors. Есть много способов добавить привязки «tab» или «menu», но одним из них будет просто использовать плагин jQuery.
Самый ОБЫЧНЫЙ и ТЕНДЕННЫЙ способ сделать это - использовать #anchors. Адресная строка вашего браузера задрается # frame1 до конца, поэтому при обновлении или перезагрузке страницы она автоматически загружает «frame1» с дополнительным кодом.
Вы даже можете вызвать якорь # / frame1.html и прочитать якорь в
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});