Как сделать скрытие открытого элемента при открытии другого showHide
Как сделать скрытие открытого элемента при открытии другого?
<script type="text/javascript"> function showHide(element_id) { //Если элемент с id-шником element_id существует if (document.getElementById(element_id)) { //Записываем ссылку на элемент в переменную obj var obj = document.getElementById(element_id); //Если css-свойство display не block, то: if (obj.style.display != "block") { obj.style.display = "block"; //Показываем элемент } else obj.style.display = "none"; //Скрываем элемент } //Если элемент с id-шником element_id не найден, то выводим сообщение else alert("Элемент с id: " + element_id + " не найден!"); } </script> <a href="javascript:void(0)" onclick="showHide('block_id')">Показать</a> <div id="block_id" style="display: none;"> Текст </div> <a href="javascript:void(0)" onclick="showHide('block_id2')"> Показать</a> <a href="javascript:void(0)" onclick="showHide('block_id3')">Показать</a> <div id="block_id2" style="display: none;"> Текст </div> <div id="block_id3" style="display: none;"> Текст </div> <a href="javascript:void(0)" onclick="showHide('block_id4')">Показать</a> <a href="javascript:void(0)" onclick="showHide('block_id5')">Показать</a> <div id="block_id5" style="display: none;"> Текст </div> <div id="block_id4" style="display: none;"> Текст </div> |
Я так понимаю что у вас есть какой-то список, и только 1 его элемент может быть виден на экране. Это делается вообще не так. Вы делаете стилями их все невидимыми и добавляете класс "active" одному из них (а с классом "active" - он видимый). Тогда все что вам надо сделать при клике по другому пункту - найти актив и убрать ему класс и тому на который кликнули - добавить. Даже если у вас не список - судя по тому что вы хотите этот алгоритм тут применим.
|
В принципе я так и предполагал, но проблема в том, что способа реализации я не совсем понимаю. Можете объяснить на примере?
|
<style> p {display: none} p.active {display: block} </style> <ul> <li> <a href="#">Раскрыть</a> <p class="active">Скрытый текст 1</p> </li> <li> <a href="#">Раскрыть</a> <p>Скрытый текст 2</p> </li> <li> <a href="#">Раскрыть</a> <p>Скрытый текст 3</p> </li> </ul> <script> document.addEventListener("click", function (e) { if (e.target.tagName == "A") { document.querySelector(".active").className = ""; e.target.parentNode.querySelector("p").className = "active"; } }, false); </script> |
Спасибо, оказывается все так просто.
|
А как сделать с картинками? Что делаю не правильно?
<script> document.addEventListener("click", function (e) { if (e.target.tagName == "IMG") { document.querySelector(".active").className = ""; e.target.parentNode.querySelector("p").className = "active"; } }, false); </script> |
candro,
Сделайте нормальный тестовый пример, так непонятно. |
Часовой пояс GMT +3, время: 02:28. |