Кнопки (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>

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

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

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

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

Решение