Как сделать так, чтобы шапка сайта не перезагружалась при переходе на другие страницы?

Всем привет, в продолжение этого вопроса - Как сделать подгрузку страницы?
Задача абсолютно идентична, но при реализации столкнулся с рядом проблем:
Сайт состоит из следующих страниц:
index.php
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles/style.css">
	<script src="scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
<?php require('header.html');?>
<div id="content">main</div>
<script>
$('a.ajax').on('click', function(){
	var url = $(this).attr('href');
	$('#content').load(url);
	history.pushState(null, null, url);
	return false;
});
</script>
</body>
</html>
header.html
<div class="nav">
	<a class="logo ajax" href="/">Логотип</a>
	<ul>
		<li><a class="ajax" href="page1.php">Страница 1</a></li>
		<li><a class="ajax" href="page2.php">Страница 2</a></li>
		<li><a class="ajax" href="page3.php">Страница 3</a></li>
	</ul>
</div>
page1.php
1
page2.php
2
page3.php
3

покликать можно здесь - aelitaplus.ru
1) Если нажать на "Логотип" (сразу или вернувшись после клика на других листах) то в див с id=content задублируется этот же див с частью страницы (оно и понятно, т.к стоит класс "ajax" и это ссылка участвует в коде). Как и где проверять такое условие? Что-то типо если href="/", то ничего не грузить? - решилась после комментария от @profesor08
2) если сразу перейти на какую нибудь страницу, например aelitaplus.ru/page1.php , то исчезнет шапка (ясно почему). Если добавить на страницы еще и шапку из header.hml, то исчезнут стили у шапки, а вернувшись с главной страницы на эту страницу опять будет задвоение шапки.
3) Вообще, это разумное решение этой задачи? Использовать ли load через jquery? Или нужно чисто ajax'ом это реализовывать (но я его ниразу не использывал, впрочем ка и load=(?
Подскажите, пожалуйста, как решить эту задачу?
  • Вопрос задан
  • 1629 просмотров
Пригласить эксперта
Ответы на вопрос 6
vessels
@vessels
Ни черта не понял, но очень интересно!
Вы хотите сделать одностраничник, чтобы контент динамично перезагружался не меняя некоторых элементов, ведь так? Ну чтож, могу посоветовать использовать js - jquery $( "#result" ).load( "ajax/test.html" );, .load. Но если проект большой, не стоит использовать этот метод, советую изучить и понять что такое SPA (single page application), а дальше выбрать фреймворк в котором вы желаете работать, это может быть ReactJS, AngularJS, VueJS, мне лично больше нравится ReactJS. Стоит заметить что изучение данных фреймворков займет не мало времени, но оно того стоит!
Ответ написан
OTCloud
@OTCloud
- И как назовемся? Пожиратели пожирателей смерти?
Никак. Новая страница -> загрузка элементов новой страницы, следовательно "перезагрузка".
Если вы хотите реализовать сайт без перезагрузки, то вам сюда
Ответ написан
profesor08
@profesor08
Потому что по клику на ссылки страниц, ты загружаешь содержимое тех страниц. А при клике на логотип, ты загружаешь содержимое изначальной страницы, и получается загружаешь сам себя. Так и получается дубль.

Тебе надо создать еще один файл main.php, в нем будет только содержимое нужного блока, как в page1.php, 2... 3, при открытии страницы, загружать его сразу, у логотипа указать ссылку на него.
Ответ написан
alex-1917
@alex-1917
Если ответ помог, отметь решением
Жевали три года назад!
ТРИ
ГОДА
НАЗАД
...
Как сделать подгрузку страницы?

Ну да ладно...
Вот тебе свежий ютуб-гайд:
1. Сначала смотри вот это в течение 2 минут - www.jooom.ru/toster/toster_222.html
2. Затем тщательно изучи вот это - www.jooom.ru/toster/toster_161.html
3. Через 18 минут на тебя снизойдет нирвана и произойдет полное погружение в великий и божественный АЯКС.
Ответ написан
xPomaHx
@xPomaHx
1vs9
Если не делать спа, и раз вопрос с jquery то проще всего поставить pjax, настраивается по сути просто указанием неизменной части, то есть шапки, и контентной части.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы