Как сделать переход по страницам без названия html файла?

Для осуществления перехода между страницами без необходимости указания имени конкретного HTML файла можно использовать технику, называемую "HTML5 History API". Этот API позволяет манипулировать историей браузера через JavaScript без перезагрузки страницы.

Для установки "безымянного" перехода с помощью History API, следует выполнить следующие шаги:

1. **Добавить изменения в HTML и CSS:** Во-первых, необходимо добавить контейнер, в который будет загружаться содержимое новой страницы. Например:

<div id="content"></div>

2. **Написать скрипт:** Далее, необходимо написать скрипт, который будет отлавливать события навигации пользователя и обновлять содержимое страницы асинхронно. Пример скрипта на JavaScript:

const content = document.getElementById('content');

function loadPage(url) {
    fetch(url)
        .then(response => response.text())
        .then(html => {
            content.innerHTML = html;
            history.pushState({ path: url }, '', url);
        })
        .catch(error => console.error('Error:', error));
}

window.onpopstate = function(event) {
    if (event.state) {
        loadPage(event.state.path);
    }
};

// Пример использования
document.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
        e.preventDefault();
        loadPage(e.target.href);
    }
});

3. **Обновить URL:** Наконец, при загрузке новой страницы через JavaScript, необходимо также обновить URL в адресной строке браузера с помощью history.pushState(). Это позволит пользователю иметь возможность использовать кнопки навигации браузера для возврата к предыдущим страницам.

Этот подход позволит вам создавать переходы между страницами без необходимости указания имени HTML файла в URL. Вместо этого URL будет выглядеть более "человечески" и легкочитаемо. Однако, помните, что при использовании History API необходимо учитывать SEO-аспекты и поддержку браузеров.