Как сделать многостраничный сайт в одном HTML файле используя Javascript?

Question

[alex01s]

Всем привет. Подскажите пожалуйста, как сделать "переход по страницам" сайта на Javascript, но на самом деле весь контент хранится в одном HTML файле. То есть, при использовании ссылок становится видимым тот section, который соответствует текущей странице, а все остальные полностью скрыты. Как на этой странице:

https://john-doe.neocities.org/

Но здесь это реализовано на CSS, и если Home Page длинный, то он не скрывается полностью.

Answer 1

[goshaLoonny]

Это очень просто сделать, но полагаю будут проблемы с SEO
Первый способ:
Обработка :target
Ссылкам в меню присваиваются якоря(#), а странички это по сути блоки с display: none, position: absolute и обязательно с НЕ прозрачным фоном т.к. первый экран не скрывается, а далее обрабатывается :target. Вот пример:


Второй способ:
Добавление скрытых(что бы не портить дизайн) <input type="radio"> и обработку :checked с использованием ~. Вот пример:

Comments

[alex01s]

обязательно с НЕ прозрачным фоном т.к. первый экран не скрывается

Проблема в том, что если первый экран содержит много текста и он длинный, то другие экраны не могут его перекрыть. Возможно ли сделать скрытие первого экрана при переходе на другие?

[goshaLoonny]

alex01s, Самое простое это назначить экранам

width: 100vw;
height: 100vh;
overflow: auto;

UDP: Обновил пример
UDP: Добавил еще один способ

[goshaLoonny]

alex01s, если ответ помог вам, отметьте его решением

[alex01s]

Спасибо, но я уже использую "велосипед" с JS. Хотя, CSS возможно будет лучше.

Answer 2

[zkrvndm]

По факту ты делаешь веб-приложение, одностраничное.

Рекомендую использовать jQuery UI, чтобы не изобретать велосипеды:
https://antonshevchuk.gitbooks.io/jquery-for-begin...

Answer 3

[rrqqww]

Есть вариант реализации с fetch.

В общем, нужно для каждой страницы создать разметку в отдельных html с общим атрибутом. Со стороны js напиши функцию, которая будет принимать url поисковика и общий контейнер, в функцию закинь fetch на url к html элементу, забирай разметку с html файла, и выводи в контейнер, прямо в этой же функции, которую повесь на обработчик клика по навигации, а навигацию сделай ссылкой, такой вариант будет работать в каждой странице.

Не стоит всю разметку пихать в один html, особенно если она объемная