Top.Mail.Ru
Ответы
Аватар пользователя
11лет
Изменено

Как по кнопкам следующая предыдущая, менять содержимое страницы html без её перезагрузки?

Есть страница. в центре (контент) отображается картинка и текст к ней. Как сделать, что бы по кнопкам вперед и назад менялось содержимое? Ну что то вроде фотогалереи, портфолио.

По дате
По рейтингу
Аватар пользователя
Новичок
11лет

Как вариант использовать хэш-навигацию. Используется часть url после знака "#", линки навигации содержат соответственно линки вида:
Обратная связь
Как известно, линки которые начинаются на "#" определятся в как линки которые ведут на текущую страницу, и, соответственно, при клике на них перехода на другую страницу не происходит. Дальше вся фишка в использовании javascript события 'hashchange' которое срабатывает при изменении части url после "#" и свойства window.location.hash, в котором хранится нужная часть url. В обработчик данного события ставится загрузка ajax'ом содержимого страницы на которую совершается переход.
Пример:

$(window).bind('hashchange', function() {
var pageName = window.location.hash;
$.get (
"content.php",
{ page: pageName },
function(data) {
$('#content').html(data);
}
);});

Аватар пользователя
Мастер
11лет

Выносим изменяющееся содержимое в отдельный именованный (с аттрибутом name) фрейм, затем делаем ссылки, в которых указываем аттрибут target="имя_фрейма". Основная страница не меняется, заново загружается только фрейм. В принципе, можно сделать на чистом HTML, но если много ссылок и нужна навигация (кнопки назад/вперед) , то здесь уже надо использовать JavaScript.

Аватар пользователя
Ученик
11лет

Средствами чисто HTML - никак. Для этого используют минимум средства JavaScript, но для этого придется конечному пользователю прогружать всю галлерею, что не безопасно для его нервов, а значит нужно еще использование PHP.
Простите, сумбурный вопрос, такой же ответ. Для организации галерей есть разные методы и все они зависят от того, на чем построен сайт, где вы хотите это применить.