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

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

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

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

HTML5

<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

<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

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

<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

    <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

    <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

<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

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

<!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>

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

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

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

@diadiavova 6288 / 2528 / 740 Регистрация: 11.04.2015 Сообщений: 4,072 Записей в блоге: 43
	12.04.2018, 10:30	6
	Сообщение от is_koprino не могу понять как тут конкретно отвечать кому то на сообщение Нужно либо клацнуть по нику в сообщении и в поле ответа вставится ник в таком виде is_koprino, . Участник получит сообщение о том, что его упомянули и ссылку на пост. Либо процитировать сообщение и участник получит такое же сообщение. Сообщение от is_koprino пока самый рабочий вариант diadiavova без js)) Ну он не такой гибкий. Например как сделать, чтобы при втором клике все скрывалось - я не придумал. )) 0

@is_koprino 0 / 0 / 0 Регистрация: 11.04.2018 Сообщений: 15
	12.04.2018, 13:51 [ТС]	7
	Ну он не такой гибкий. Например как сделать, чтобы при втором клике все скрывалось - я не придумал. )) А оно и не должно скрываться, в общем то что нужно! Спасибо)) Добавлено через 1 минуту diadiavova, Сообщение от diadiavova Нужно либо клацнуть по нику в сообщении и в поле ответа вставится ник в таком виде is_koprino, . Участник получит сообщение о том, что его упомянули и ссылку на пост. Либо процитировать сообщение и участник получит такое же сообщение. Во вроде разобрался) Добавлено через 2 часа 51 минуту Появилась новая проблема, все работает только оно страницу перегружает, а надо что бы блоки появлялись без перезагрузки, похоже что без JS не обойтись. 0

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

Решение