HTML5 ссылки на меню покидают текущую страницу

Question

У меня есть строка меню, которая ссылается на локальные веб-страницы, которая работает нормально, за исключением того, что когда я нажимаю на ссылку в строке меню, она переходит на соответствующую веб-страницу, оставляя веб-страницу с строкой меню, но я хочу загрузить страницу нижеменю, чтобы пользователь мог использовать меню для навигации.Должен ли я использовать iframes?извините, что не использовал HMTL5 в течение достаточно долгого времени, любая помощь очень ценится.

Нил.

<div class="menu">
        <a href="home.hmtl">Home</a>
        <a href="index.html">Index of Services</a>
        <a href="schedule.html">Schedule</a>
        <a href="examples.hmtl">Examples</a>
     </div>
    <div class="content">

    This page is to help you organise

</div>

Answer 1

Да, вам нужны рамки.Или, самое распространенное, иметь одинаковый код меню на всех htmls, потому что с фреймами ваш URL не изменится, если вы не сделаете несколько трюков.

Если вы не хотите дублировать код, вы можете использовать PHP,Затем вы можете создать index.php с помощью меню и включений в содержимое страницы.

Редактировать:
Вы также можете сделать это с некоторым JavaScript, но у него также есть те же проблемы с URL.Сайт также не будет работать, если JavaScript отключен.

Edit2: хитрости для фреймов и javascript, о которых я говорил ранее, могут быть достигнуты без переписывания URL-адресов и с простым HTML + CSS + JS с помощью якорей.

Обычно вы меняете свои URL-адреса на якоря с именем страницы, и когда страница загружается впервые, вы проверяете этот хэш, чтобы при вводе вашего URL-адреса отображался правильный кадр, например http://mypage.com/#examples.Вы можете получить доступ и установить хеш с помощью window.location.hash.

Таким образом, ваш код будет выглядеть следующим образом:

<div class="menu">
    <a href="#home">Home</a>
    <a href="#index">Index of Services</a>
    <a href="#schedule">Schedule</a>
    <a href="#examples">Examples</a>
</div>
<div class="content">
    This page is to help you organise
</div>

Для обоих с кадрами или без них вам необходимо событие JavaScript, присоединенное к каждому пункту меню.

С фреймами JS в основном меняет URL фрейма, когда пользователь нажимает на меню.

Без фреймов вы используете xhr для загрузки HTML, а затем, если вы успешно загрузилиhtml, вы удаляете все внутри div.content и заменяете тем, что вы скачали, на innerHtml.

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

Что касается PHP или другого серверного "скрипта", то любой учебник для начинающих объяснит, как это сделать.