Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2019, 13:44
Новичок на форуме
Отправить личное сообщение для Tenito Посмотреть профиль Найти все сообщения от Tenito
 
Регистрация: 04.04.2019
Сообщений: 3

Разные кнопки - отображение разных блоков
Суть: есть 4е кнопки в блоке Div1, и вот нужно что бы при нажатии на одну из этих кнопок - отображался еще один соответствующий кнопке блок.
На данный момент, к примеру, при нажатии togglee0 - отображается Div3. Но что бы он "пропал" нужно нажать на ту же кнопку.
Теперь вопрос: как сделать так, что бы блок Div3 пропадал при нажатии на другую кнопку, которая в свою очередь отобразит свой привязанный блок? Заранее спасибо.
<html>
<head>
<script>
function switchVisible2(element) {
  if (element.className && element.className.length > 0) {

    var targetEl = document.getElementById(element.className);

    var displayMode = targetEl.style.display === "block" ? "none" : "block";
   
    targetEl.style.display = displayMode;
  }
}
</script>
</head>
<body>
<div id="Div1">
  <input type="button" id="togglee0" class="Div3" value="togle1" onclick="switchVisible2(this);" />
  <input type="button" id="togglee1" class="Div4" value="toggle2" onclick="switchVisible2(this);" />
  <input type="button" id="togglee2" class="Div5" value="toggle3" onclick="switchVisible2(this);" />
  <input type="button" id="togglee3" class="Div6" value="toggle4" onclick="switchVisible2(this);" />
</div>

<div id="Div3" style="display:none">
  <input type="button" id="togglee01" value="Div3" />
  <input type="button" id="togglee02" value="Div3" />
  <input type="button" id="togglee03" value="Div3" />
  <input type="button" id="togglee04" value="Div3" />

</div>

<div id="Div4" style="display:none">
  <input type="button" id="togglee01" value="Div4" />
  <input type="button" id="togglee02" value="Div4" />
  <input type="button" id="togglee03" value="Div4" />
  <input type="button" id="togglee04" value="Div4" />

</div>

<div id="Div5" style="display:none">
  <input type="button" id="togglee01" value="Div5" />
  <input type="button" id="togglee02" value="Div5" />
  <input type="button" id="togglee03" value="Div5" />
  <input type="button" id="togglee04" value="Div5" />

</div>

<div id="Div6" style="display:none">
  <input type="button" id="togglee01" value="Div6" />
  <input type="button" id="togglee02" value="Div6" />
  <input type="button" id="togglee03" value="Div6" />
  <input type="button" id="togglee04" value="Div6" />
</div>

</body>
</html>

Последний раз редактировалось Tenito, 11.04.2019 в 10:12.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2019, 15:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Tenito,
форум - поиск - открывашка
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2019, 10:06
Новичок на форуме
Отправить личное сообщение для Tenito Посмотреть профиль Найти все сообщения от Tenito
 
Регистрация: 04.04.2019
Сообщений: 3

...

Последний раз редактировалось Tenito, 11.04.2019 в 13:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие блоков с удалением кнопки madeas Элементы интерфейса 4 07.08.2018 16:01
Связь блоков в разных контейнерах madeas Элементы интерфейса 9 16.07.2018 14:00
Разные значения для разных разрешений? RArtemA Общие вопросы Javascript 1 04.05.2018 22:40
Отображение текста кнопки sailars Общие вопросы Javascript 5 01.02.2016 20:13
Отображение скрытых блоков Perlovka_Nat Events/DOM/Window 7 29.07.2010 20:42