Как отображать разный контент в одном блоке?

Question

[j7sx]

Доброго времени суток. Хотел делать сайт на фреймах, но прочитал, что уже давно не используют. Начал делать блочной версткой. html+css. В итоге получилось:
у меня есть блоки header, navigation(кнопки на скрине), menu, content(белый цвет на скрине), footer.
Не пойму как сделать так, чтобы при нажатии кнопок в блоке navigation нужная информация загружалась в блоке content (в белом на скрине(самый большой)).
Например, нажимаю вход и загружается в блок content(белый на скрине) страница с формой для входа. Или нажимаю аккаунт, а там(в белом блоке на скрине) выводится инфа о пользователе или ошибка, если пользователь не вошёл.

Советовали Angular, ReactOS. Но проект не большой и нет возможности использовать таких "монстров" у хостера. Можно как - то проще? Например, может есть какой-нибудь ява скрипт, чтобы перехватывал запросы страниц и не открывал в новом окне, а перегружал только блок content и выводил инфу. Или может можно указать в коде страницы, в каком блоке ей грузиться, или какую страницу (в случае php ) инклюдить, при нажатиии той или иной кнопки.
Смотрел на semantic-ui, но там только css и я так понимаю, что он в моем случае не поможет.

Comments

[Иван Козлов]

Небольшое уточнение:
При клике на ссылку(элемент меню) должен меняться url(в строке браузера) и содержимое блока #content, а остальные элементы страницы оставаться не перезагружаясь?
Или:
должен просто меняться блок #content?

[j7sx]

Иван Козлов: меняться url. а остальное не перегружать. Но было бы интересно услышать и про второй вариант

Answer 1

[j7sx]

В общем нашёл такой способ. Теперь видимо нужно писать стили для страницы enter.html и для других, с учётом стилей для index.html, чтобы отображалось в тех местах, где мне надо.

<a href="http://мойсайт.ru/enter.html" class="button" onclick="changeBlock('enter.html'); return false;">ВОЙТИ</a>

<script  type="text/javascript">
    function changeBlock(id) {
       document.getElementById('content').innerHTML = '<iframe width="700" height="760" src="http://www.мойсайт.ru/'+id+'" frameborder="0" allowfullscreen></iframe>';
    }
    </script>

Answer 2

[Tsiren Naimanov]

ну выставить все блоки
и через js писать visible

Answer 3

[Никита Нафранец]

Не слышал, чтоб операционную систему использовали для создания сайта. Iframe до сих пор используют, например карты Гугл на сайт вставляют через iframe. Можете воспользоваться чем-то наподобие плагина bootstrap tab.js . bootstrap-3.ru/javascript.php (ищите по слову tab.js)

Answer 4

[Jeditobe]

Может ReactJS?