как сделать переход от экрана к экрану на одной странице

Question

у нас есть какая-то менюшка с выбором страниц например профиль-работы сейчас у нас активен профиль мы жмем на работы остаемся на той же странице. На ней есть соответствующий ей контент. Скажите как сделать по нормальному переключение контента. Я начинающий разработчик и в моем понимании нужно сделать к блоку c профилем display = none, а с работами сделать видимым. Есть ли какие-то альтернативы не через костыли или это так и делается? (я понимаю,что проще сделать это через другую страницу, но если рассматривать что все происходит на одной)

Answer 1

То что вы описываете, с переключением контента без изменения URL адреса страницы реализуется по средством SPA технологии (Можно и другим методом, но это уже намного сложнее)

Если вашему проекту не очень важно продвижение в Интернете и SEO продвижения, то выберите любой из фреймворков/библиотек по типу Vue React Angular и сможете решить вашу задачу. Бесплатного материала и видеоуроков полно.

Answer 2

Предложу такой вариант: Меню - отдельный <div id="menu"> Внутри него - элементы меню. Я бы сделал тег <a> с событием onclick() или ссылкой href="javascript:...;", а также идентификатором со стилем. Тег <a> вполне может использоваться вместо кнопки, сто раз такое видел на крупных сайтах и сам делал. Главное - сделать красивые стили. Идентификатор нужен на случай, если количество пунктов меню заранее неизвестно и стили им надо будет назначать динамически. Также вместо идентификатора можно назначить css-класс и задать стиль сразу всем элементам меню, а внутри указать текст

В скрипте будет функция, обрабатывающая нажатия на элементы меню, принимающая аргументом идентификатор контента в json-объекте данных. Например, назовём её changeContent() Теперь - об этом самом объекте данных. В скрипте должна быть загружена информация - удобнее всего объектом json, но можно и по-своему Например, json такого вида: {"page1":"content страницы 1","page2":"content страницы 2"...} Откуда она берётся - не важно, главное, чтобы была

Ну и также на большей площади страницы располагается ещё один <div id="content">, в котором меняется свойство innerHTML в функции changeContent(), обрабатывающей нажатия по элементам меню, а информация берётся из объекта

Упрощённый код, я думаю, такой: В <head> подключаем css-стили Далее:

<div id="menu">
    <a href="javascript:changeContent('page1');" id="menu1" class="menuItem"></a>
    <a href="javascript:changeContent('page2');" id=:menu2" class="menuItem"></a>
    <a href="javascript:changeContent('page3');" id="menu3" class="menuItem"></a>
</div>

<div id="content"></div>
<script>
//скрипт, обрабатывающий нажатие
//скрипт лучше подключить по ссылке, чтобы код страницы был чище
function changeContent(idOfPage) {
    document.getElementById("content").innerHTML = objectJson[idOfPage];
}

//также скрипт, назначающий стили  пунктам меню по событию window.onLoad (в случае, если хотите оперировать стилями программно сразу после загрузки страницы (до загрузки javascript не даст))
</script>

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

БЛОГ НА HUSL

как сделать переход от экрана к экрану на одной странице

Ответы (2 шт):