Как сделать скрытие открытого элемента при открытии другого 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, время: 10:48. |