Кнопки (div) при нажатии открывают внешние блоки (div) за каждой кнопкой свой контент

@is_koprino · Регистрация: 11.04.2018

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите пожалуйста в следующем вопросе!
Есть такой html код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="cont">
 
  <div class="button" id="but1">На машине</div>
  <div class="button" id="but2">На катере</div>
  <div class="button" id="but3">На вертолете</div>
 
</div>
 
<div class="map">
  
   <div class="goo-map" id="map1">Карта 1</div>
  <div class="goo-map" id="map2">Карта 2</div>
  <div class="goo-map" id="map3">Карта 3</div>
  
</div>

Надо что бы при нажатии на кнопку скажем "На катере" ниже в блоке "map" открывалась соответствующая карта этой кнопке (карта 2). Далее нажимая на вертолете активировалась (карта 3), а карта 2 соответственно скрывалась и т.д. А при загрузке страницы была активна первая кнопка "На машине" с развернутой картой 1. Надеюсь понятно объяснил.

Решений находил много но все они работают при условии что дивы вложены друг в друга, а тут надо как то отдельно сделать.
Подскажите пожалуйста как на JS реализовать это?

@atanov · 11.04.2018, 18:49

is_koprino, а почему не получается? И зачем Вам

Сообщение от is_koprino

div class="button"

, а не просто button?
Вот как вариант:

CSS
1
2
3
#map1{display: none;}
#map2{display: none;}
#map3{display: none;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<meta http-equiv = "Content-Type" content = "text/html" charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "29.css">
<div class = "cont">
  <button id = "but1">На машине</button>
  <button id = "but2">На катере</button>
  <button id = "but3">На вертолете</button>
</div>
<div class = "map">
  <div class = "goo-map" id = "map1">Карта 1</div>
  <div class = "goo-map" id = "map2">Карта 2</div>
  <div class = "goo-map" id = "map3">Карта 3</div>
</div>
<script src = "29.js" type = "text/javascript"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.getElementById('but1').onclick = function but1 (){
document.getElementById('map1').style.display = 'block';
document.getElementById('map2').style.display = 'none'; 
document.getElementById('map3').style.display = 'none'; 
}
document.getElementById('but2').onclick = function but2 (){
document.getElementById('map1').style.display = 'none';
document.getElementById('map2').style.display = 'block';    
document.getElementById('map3').style.display = 'none'; 
}
document.getElementById('but3').onclick = function but3 (){
document.getElementById('map1').style.display = 'none';
document.getElementById('map2').style.display = 'none'; 
document.getElementById('map3').style.display = 'block';    
}

Qwerty_Wasd · 11.04.2018, 19:54

atanov, условия же ж

Сообщение от is_koprino

Надо что бы при нажатии на кнопку скажем "На катере" ниже в блоке "map" открывалась соответствующая карта этой кнопке (карта 2). Далее нажимая на вертолете активировалась (карта 3), а карта 2 соответственно скрывалась и т.д. А при загрузке страницы была активна первая кнопка "На машине" с развернутой картой 1.

Песочница

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="cont">
  <button id="but1">На машине</button>
  <button id="but2">На катере</button>
  <button id="but3">На вертолете</button>
</div>
<div class="map">
  <div class="goo-map" id="map1">Карта 1</div>
  <div class="goo-map" id="map2">Карта 2</div>
  <div class="goo-map" id="map3">Карта 3</div>
</div>

CSS
1
.goo-map:not(:first-child){display:none}

JavaScript
1
2
3
but1.onclick=function(){if(map1.style.display==="none") map1.style.display="block"; else map1.style.display="none";map2.style.display=map3.style.display="none"}
but2.onclick=function(){if(map2.style.display==="none") map2.style.display="block"; else map2.style.display="none";map1.style.display=map3.style.display="none"}
but3.onclick=function(){if(map3.style.display==="none") map3.style.display="block"; else map3.style.display="none";map2.style.display=map1.style.display="none"}

@diadiavova · 12.04.2018, 01:54

Предложу вариант без JS

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
        input[name="map"],
        input[name="map"]:not(:checked)+div {
            display: none;
        }
 
        .button {
            border: gray 2px outset;
            background-color: aliceblue;
            user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            padding: 2px;
        }
 
        .button:active {
            border: gray 2px inset;
        }
    </style>
 
    <div class="cont">
        <label class="button" for="m1" id="but1">На машине</label>
        <label class="button" for="m2" id="but2">На катере</label>
        <label class="button" for="m3" id="but3">На вертолете</label>
    </div>
    <div class="map">
 
        <input type="radio" name="map" id="m1" checked="checked" />
        <div class="goo-map" id="map1">Карта 1</div>
        <input type="radio" name="map" id="m2" />
        <div class="goo-map" id="map2">Карта 2</div>
        <input type="radio" name="map" id="m3" />
        <div class="goo-map" id="map3">Карта 3</div>
 
    </div>

@is_koprino · 12.04.2018, 10:08 **[ТС]**

Работает, но в начале (как бы при загрузке страницы) все блоки скрыты а надо что бы первая карта была открыта, а далее все как сейчас работает.

Добавлено через 3 минуты
Все работает, но надо что бы блоки не закрывались при повторном нажатии)))

Добавлено через 2 минуты
Я извиняюсь но не могу понять как тут конкретно отвечать кому то на сообщение, в общем пока самый рабочий вариант
diadiavova без js)) не знаю на счет кросбраузерности, надеюсь что будет работать везде))

@diadiavova · 12.04.2018, 10:30

Сообщение от is_koprino

не могу понять как тут конкретно отвечать кому то на сообщение

Нужно либо клацнуть по нику в сообщении и в поле ответа вставится ник в таком виде is_koprino, . Участник получит сообщение о том, что его упомянули и ссылку на пост. Либо процитировать сообщение и участник получит такое же сообщение.

Сообщение от is_koprino

пока самый рабочий вариант
diadiavova без js))

Ну он не такой гибкий. Например как сделать, чтобы при втором клике все скрывалось - я не придумал. ))

@is_koprino · 12.04.2018, 13:51 **[ТС]**

Ну он не такой гибкий. Например как сделать, чтобы при втором клике все скрывалось - я не придумал. ))

А оно и не должно скрываться, в общем то что нужно! Спасибо))

Добавлено через 1 минуту
diadiavova,

Сообщение от diadiavova

Нужно либо клацнуть по нику в сообщении и в поле ответа вставится ник в таком виде is_koprino, . Участник получит сообщение о том, что его упомянули и ссылку на пост. Либо процитировать сообщение и участник получит такое же сообщение.

Во вроде разобрался)

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

@diadiavova · 12.04.2018, 14:10

Сообщение от is_koprino

Появилась новая проблема, все работает только оно страницу перегружает, а надо что бы блоки появлялись без перезагрузки, похоже что без JS не обойтись.

Да там в принципе не может такого быть. Скорей всего причина в содержимом, либо сами карты перегружают, либо еще что-то. Если так, то с JavaScript этот эффект никуда не денется.

Добавлено через 13 минут
is_koprino, попробуй такой вариант с JavaScript

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    <style>
        #map1,
        #map2,
        #map3 {
            display: none;
        }
 
       [data-showid=but1]>#map1,
       [data-showid=but2]>#map2,
       [data-showid=but3]>#map3 {
            display: block;
        }
 
 
 
        .button {
            border: gray 2px outset;
            background-color: aliceblue;
            user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            padding: 2px;
            display: inline;
        }
 
        .button:active {
            border: gray 2px inset;
        }
    </style>
 
    <div class="cont">
        <div class="button" id="but1" onclick="document.getElementById('map').setAttribute('data-showid',this.id)">На машине</div>
        <div class="button" id="but2" onclick="document.getElementById('map').setAttribute('data-showid',this.id)">На катере</div>
        <div class="button" id="but3" onclick="document.getElementById('map').setAttribute('data-showid',this.id)">На вертолете</div>
    </div>
    <div class="map" id="map" data-showid="but1">
        <div class="goo-map" id="map1">Карта 1</div>
        <div class="goo-map" id="map2">Карта 2</div>
        <div class="goo-map" id="map3">Карта 3</div>
    </div>

Но я не думаю, что что-то изменится. Надо искать причину в самом контенте.

@is_koprino · 12.04.2018, 14:39 **[ТС]**

diadiavova,
Решил проблему, просто у меня ссылки стояли с href="#" поэтому шел перегруз страницы, а так на JS вот так все хорошо работает:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class = "cont">
  <button id = "but1">На машине</button>
  <button id = "but2">На катере</button>
  <button id = "but3">На вертолете</button>
</div>
<div class = "map">
  <div class = "goo-map" id = "map1">Карта 1</div>
  <div class = "goo-map" id = "map2">Карта 2</div>
  <div class = "goo-map" id = "map3">Карта 3</div>
</div>

CSS
1
2
#map2{display: none;}
#map3{display: none;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.getElementById('but1').onclick = function but1() {
  document.getElementById('map1').style.display = 'block';
  document.getElementById('map2').style.display = 'none';
  document.getElementById('map3').style.display = 'none';
}
document.getElementById('but2').onclick = function but2() {
  document.getElementById('map1').style.display = 'none';
  document.getElementById('map2').style.display = 'block';
  document.getElementById('map3').style.display = 'none';
}
document.getElementById('but3').onclick = function but3() {
  document.getElementById('map1').style.display = 'none';
  document.getElementById('map2').style.display = 'none';
  document.getElementById('map3').style.display = 'block';
}

https://jsfiddle.net/2sdrmu0u/49/
Может кому пригодиться. Всем большущее спасибо.

@diadiavova · 12.04.2018, 14:58

Сообщение от is_koprino

Может кому пригодиться.

Честно говоря, я сильно сомневаюсь, что это может кому-то пригодиться. Ну вот у тебя кнопок и соответствующих блоков немного, а вот представь себе, что это надо реализовать для десяти блоков. Как изменится код и сколько его будет, причем речь идет о практически повторяющемся коде.
Мой последний метод(немного изменил) в данном случае будет выглядеть так.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <style>
        #map1,
        #map2,
        #map3,
        #map4,
        #map5,
        #map6,
        #map7,
        #map8,
        #map9,
        #map10 {
            display: none;
        }
 
       [data-showid=but1]>#map1,
       [data-showid=but2]>#map2,
       [data-showid=but3]>#map3,
       [data-showid=but4]>#map4,
       [data-showid=but5]>#map5,
       [data-showid=but6]>#map6,
       [data-showid=but7]>#map7,
       [data-showid=but8]>#map8,
       [data-showid=but9]>#map9,
       [data-showid=but10]>#map10 {
            display: block;
        }
    </style>
 
    <div class="cont" 
    onclick="let b = arguments[0].target;
    if(b.tagName == 'BUTTON')document.getElementById('map').setAttribute('data-showid',arguments[0].target.id)">
    <button id="but1">На машине</button>
    <button id="but2">На катере</button>
    <button id="but3">На вертолете</button>
    <button id="but4">На геликоптере</button>
    <button id="but5">На пепелаце</button>
    <button id="but6">На лошади</button>
    <button id="but7">На осле</button>
    <button id="but8">На ракете</button>
    <button id="but9">На тракторе</button>
    <button id="but10">На поезде</button>
</div>
    <div class="map" id="map" data-showid="but1">
            <div class="goo-map" id="map1">Карта 1</div>
            <div class="goo-map" id="map2">Карта 2</div>
            <div class="goo-map" id="map3">Карта 3</div>
            <div class="goo-map" id="map4">Карта 4</div>
            <div class="goo-map" id="map5">Карта 5</div>
            <div class="goo-map" id="map6">Карта 6</div>
            <div class="goo-map" id="map7">Карта 7</div>
            <div class="goo-map" id="map8">Карта 8</div>
            <div class="goo-map" id="map9">Карта 9</div>
            <div class="goo-map" id="map10">Карта 10</div>
                    </div>
</body>
 
</html>

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

Новые блоги и статьи Все статьи Все блоги /
Настройка записи справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .

@is_koprino 0 / 0 / 0 Регистрация: 11.04.2018 Сообщений: 15
	12.04.2018, 10:08 [ТС]
	Работает, но в начале (как бы при загрузке страницы) все блоки скрыты а надо что бы первая карта была открыта, а далее все как сейчас работает. Добавлено через 3 минуты Все работает, но надо что бы блоки не закрывались при повторном нажатии))) Добавлено через 2 минуты Я извиняюсь но не могу понять как тут конкретно отвечать кому то на сообщение, в общем пока самый рабочий вариант diadiavova без js)) не знаю на счет кросбраузерности, надеюсь что будет работать везде)) 0

Кнопки (div) при нажатии открывают внешние блоки (div) за каждой кнопкой свой контент

Решение