Как сделать переключение между страницами html

Посмотреть пример работы этого скрипта, можно просто перейдя на любую страницу нашего сайта.

Как сделать переход между страницами без перезагрузки?

Как сделать переход по страницам сайта без перезагрузки? Как примеру в «ВК» или «YouTube». Помогите пожалуйста!

• Вопрос задан более года назад
• 1240 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2
Егор Лаптев @EgorLaptev

Почитай про SPA. Обычно подобные сервисы разрабатываются при помощи js библиотек Vue router, React router и т.п.

Ответ написан более года назад
Комментировать
Нравится 2 Комментировать
Софт для автоматизации
Ниже пример функции для загрузки контента страниц по AJAX и без перезагрузки страницы:

async function pageUpdate(event) < // Если функция вызвана без аргументов: if (typeof event == 'undefined') < // Устанавливаем обработчики // на все ссылки на странице: $('body a[href]').click(pageUpdate); >// Если функция вызвана // в результате клика // по ссылке: else < // Берём адрес с нажатой ссылки // и записываем в переменную link: var link = event.target.href; // Если ссылка ведет на наш сайт: if (new URL(link)['host'] == location.host) < // Предотвращаем переход: event.preventDefault(); // Блокируем страницу, чтобы // больше нельзя было кликать: $('body').css('pointer-events', 'none'); // Активируем анимацию исчезновения (полупрозрачности): var hide = $('body').animate(< opacity: 0.2 >, 500).promise(); var ajax = $.ajax(link); // Запускаем загрузку новой страницы await hide; // Ждем окончания анимации исчезновения // Вставляем данные на страницу беря их с ново-скачанной страницы: var doc = new DOMParser().parseFromString((await ajax), 'text/html'); var html = $('body', doc).html(); $('body').html(html); // Скролим в самый вверх: $('body, html').animate(, 0); // Меняем адрес в адресной строке: history.pushState(null, null, link); // Заново ставим // обработчики: pageUpdate(); // Активируем анимацию // постепенного появления: await $('body').animate(< opacity: 1 >, 500).promise(); // Снимаем блокировку с документа: $('body').css('pointer-events', ''); > > > pageUpdate();

Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.

Важно! Если на сайте есть какой-то сложный функционал, данный скрипт скорее-всего их сломает!

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +2 ещё

Не работает скрипт npm run, что делать?

• 1 подписчик
• только что
• 1 просмотр

Плавный переход между страницами

Нашел скрипт который украсит ваш сайт. Скрипт подгружает фон сайта а потом уже всю страницу что делает красивое переключение.

Установка:
Необходимо поменять свойства тега body:

$(document).ready(function() <
$(«body»).css(«display», «none»); /** body (здесь и далее) означает, что эффект применяется ко всей странице. Можно изменить на идентификаторы любых элементов (#content, .comments и т.д.) */

$(«body»).fadeIn(500); /** время появления в миллисекундах */

function redirectPage() <
window.location = linkLocation;
>
>);

Плавный переход будет работать только если вы подключите к ссылке class — fade
Получится что то типа:

Нумерация для переключения между страницами

Конечно полный функционал было бы здорово увидеть и разобраться, что к чему. Но так как данное решение ищу в учебных целях буду рад любой полезной информации. К сожалению, в сети ничего не нашел.

27 мар 2020 в 19:24
Могу написать пару вариантов — через ajax , fletch , axios и на jquery . Смотря что хотите видеть.
27 мар 2020 в 20:35
Так же надо понимать откуда будете брать данные и в каком виде, и как их хотите выводить.
27 мар 2020 в 20:51

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

28 мар 2020 в 8:10

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

UPD // добавил комментарии по просьбе ТС

P.S. стили не делал, но могу по желанию

document.querySelector('.btns-pages').addEventListener('click', e => < // вешаем один обработчик события клика на весь блок const < target >= e; // цель, на которую мы кликнули const targetClassList = target.classList; // массив классов цели, на которую мы кликнули const allNumPages = [ . document.querySelectorAll('.num-page')]; // массив всех нумерованых блоков (блоки с классом .num-page), оператор '. ' здесь не просто так const activePageNumber = allNumPages.findIndex(i => i.classList.contains('num-active')); // номер (индекс) ранее выбранной страницы switch(true) < // этот оператор смотрит на какую кнопку мы кликнули case targetClassList.contains('btn-left'): return activePageNumber && setNum(-1, true); // если кликнули на кнопку влево case targetClassList.contains('btn-right'): return (activePageNumber - allNumPages.length + 1) && setNum(1, true); // если кликнули на кнопку вправо case targetClassList.contains('num-page'): return setNum(target.innerHTML); // если кликнули прямо на число >function setNum(num, direction = null) < // функция, которая задает выбранную страницу. параметр num - какую цифру мы выбрали (если мы нажали на цифру). параметр direction - направление стрелки, которую мы выбрали (если мы нажали на стрелку) allNumPages[activePageNumber].classList.remove('num-active'); // убирает класс .num-active с ранее выбранной страницы // здесь самый сок // если в вызываемой функции указан аргумент direction (он true или false), то берем индекс ранее выбранной цифры и плюсуем/минусуем 1, чтобы активировать предыдущую/следующую цифру // плюсовать или минусовать указывает аргумент num, который равен -1 либо 1 // если в вызываемой функции не указан аргумен direction (он равен null) - значит мы кликнули прямо на число. берем содержимое выбранной цифры (через innerHTML) и по полученому индексу делаем элемент активным (allNumPages[direction === null ? target.innerHTML - 1 : activePageNumber + num]).classList.add('num-active') ; >>); 

.btns-pages < display: flex; align-items: center; >.btns-pages > * < cursor: pointer; >.num-page < padding: 10px; >.num-page.num-active

 
 
1
 
2
 
3
 
4
 
5
 ->