Как сделать одну статическую HTML-страницу с помощью Twitter Bootstrap, которая может показывать различные разделы в соответствии с кликом пользователя

Question

Я делаю простой сайт для размещения моего профиля. Я использовал Twitter Bootstrap для макета.

У меня есть 4 раздела (A, B, C, D) на моем сайте. Я использую четыре разных html-файла (т.е. A.html, B.html, C.html, D.html) для сохранения соответствующего текста разделов. Я должен использовать один и тот же текст заголовка (для навигации) во всех четырех файлах HTML.

Есть ли способ, которым я могу использовать только один HTML-файл, то есть index.html, и показывать соответствующий раздел, когда пользователь нажимает на панель навигации?

Я могу использовать только статические веб-страницы. Служба веб-хостинга, которую я использую, позволяет только статические страницы без PHP и т.д.

Answer 1

Есть несколько вариантов в зависимости от того, чего вы пытаетесь достичь:

1. Если целью является сохранение отдельного содержимого в индексах A, B, C и D, можно использовать AJAX для загрузки содержимого с этих страниц и его отображения. Каждый щелчок в навигации будет либо загружать содержимое в первый раз в <div> и показывать его, либо обнаруживать, что оно уже загружено, и отображать его, скрывая другие разделы.

2. Если сервер поддерживает ту или иную форму серверной стороны, то навигация может быть включена в каждую страницу. В вопросе не было достаточно информации, чтобы определить, возможно ли это.

3. Структура index.html включает в себя весь контент и показывает только выбранную часть. Это не будет хорошо масштабироваться при увеличении размера контента и загружает весь контент заранее, но может быть полезно в некоторых случаях.