Форум

Migor · #1 (**permalink**) 28.07.2022, 12:19

Всем привет! Подскажите пожалуйста как реализовать следующий функционал?

на главной странице есть 3 ссылки, которые ведут на другую страницу на которой 3 кнопки с событием onclick, которые переключают 3 блока (display = block/none) при нажатии. Как сделать чтобы эти блоки переключались по клику с главной страницы. Например посетитель на главной странице нажимает 2-ую ссылку которая открывает внутреннюю страницу и автоматически загружает display = block у второго Блока? если с главной странице идет клик по 1-ой ссылке, то при загрузке внутренней страницы автоматически display = block у 1-го блока. и так для каждого блока на внутренней странице. Заранее благодарен.

ksa · #2 (**permalink**) 28.07.2022, 14:15

В самой ссылке можно передать информацию о том какой блок активировать...

По окончании загрузки - узнать эту информацию и активировать нужный элемент.

Migor · #3 (**permalink**) 28.07.2022, 15:34

как

ksa · #4 (**permalink**) 28.07.2022, 18:50

Можно дописать к ссылке некую переменную... Или некий хеш...

Migor · #5 (**permalink**) 29.07.2022, 10:28

межете пример привести как в ссылку вставить переменную

ksa · #6 (**permalink**) 29.07.2022, 11:59

let url = 'https://my-site/home'
url = url + '?tab=1'
alert(url)

Migor · #7 (**permalink**) 29.07.2022, 12:10

и как этот пример может решить вопрос который я задавал? на главной странице 3 ссылки которые ведут на 1 внутреннюю страницу.. на внутренней странице 3 скрытых блока.. как сделать чтобы при клики на ссылка на главной странице загружалась внутренняя страница и стиль у блока менялся display = block у того блока номер которого соответствует номеру ссылке которая на главной странице?

рони · #8 (**permalink**) 29.07.2022, 13:37

Migor,
на странице с блоками проверяешь чему равен tab и открываешь блок равный tab

Migor · #9 (**permalink**) 29.07.2022, 17:35

разобрался... Спасибо!

рони · #10 (**permalink**) 29.07.2022, 18:10

Migor,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item {
            display: none;
        }

        .item.open {
            display: block;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let url = new URL('https://my-site/home?tab=2'); //let url = new URL(location);
            let index = new URLSearchParams(url.search).get('tab') || 0;
            let elems = document.querySelectorAll(".item");
            elems[index].classList.add("open")
        })
    </script>
</head>

<body>
    <div class="item">0</div>
    <div class="item">1</div>
    <div class="item">2</div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript