Всем привет, в продолжение этого вопроса -
https://toster.ru/q/80746
Задача абсолютно идентична, но при реализации столкнулся с рядом проблем:
Сайт состоит из следующих страниц:
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>
покликать можно здесь -
aelitaplus.ru
1) Если нажать на "Логотип" (сразу или вернувшись после клика на других листах) то в див с id=content задублируется этот же див с частью страницы (оно и понятно, т.к стоит класс "ajax" и это ссылка участвует в коде). Как и где проверять такое условие? Что-то типо если href="/", то ничего не грузить? - решилась после комментария от @profesor08
2) если сразу перейти на какую нибудь страницу, например
aelitaplus.ru/page1.php , то исчезнет шапка (ясно почему). Если добавить на страницы еще и шапку из header.hml, то исчезнут стили у шапки, а вернувшись с главной страницы на эту страницу опять будет задвоение шапки.
3) Вообще, это разумное решение этой задачи? Использовать ли load через jquery? Или нужно чисто ajax'ом это реализовывать (но я его ниразу не использывал, впрочем ка и load=(?
Подскажите, пожалуйста, как решить эту задачу?
