Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

JavaScript скрыть показать блок, при открытии одного, другие скрываются, как?

#1 Avin

Avin
  • Пользователь
  • 82 сообщений
  • Репутация: 1
0

Отправлено 19 Декабрь 2012 - 09:31

Добрый вечер, уважаемые знатоки!

Столкнулся с проблемой, что незнаю как скрыть/показать блок (div) при этом, если действие открыть блок, чтобы другие открытый блок скрывался. т.е. открытым должен быть всегда только один блок из множества.
Количество блоков меняется очень часто, поэтому надо что-то не статичное, чтобы каждый раз не дописывать имена новых divov в функцию

Написал функцию которая открывает, скрывает только отдельный блок:
function p()
{
if(document.getElementById('p').style.display == 'none'){
document.getElementById('p').style.display = 'block';
}else{
document.getElementById('p').style.display = 'none';
}
}

Голову ломаю со вчерашнего вечера, ничего придумать не могу.

Примерный вид блоков:

<a href="#" onclick="openclose()">Показать/скрыть блок 1</a>
<div id="block1">Блок 1</div>

<a href="#" onclick="openclose()">Показать/скрыть блок 2</a>
<div id="block2">Блок 2</div>

<a href="#" onclick="openclose()">Показать/скрыть блок 3</a>
<div id="block3">Блок 3</div>

...

<a href="#" onclick="openclose()">Показать/скрыть блок N</a>
<div id="blockN">Блок N</div>

Пожалуйста, помогите с проблемой.

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 19 Декабрь 2012 - 11:20

Avin,
вот вам набросок кода. Как вы просили в нем "открыт всегда только один блок из множества."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show/Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"><!--
var selected_pnt = 1;
function showHide(pnt_to_select) {
if (selected_pnt != pnt_to_select) {
document.getElementById("block"+selected_pnt).className = "hide";
document.getElementById("block"+pnt_to_select).className = "show";
document.getElementById("lnk"+pnt_to_select).innerHTML = "Сейчас показан "+pnt_to_select;
document.getElementById("lnk"+selected_pnt).innerHTML = "Показать "+selected_pnt;
selected_pnt = pnt_to_select;
}
}
//--></script>
<style type="text/css">
*{padding: 0; margin: 0; text-align: left;}
#roll{
overflow: hidden;
padding: 1em;
}
#roll ul{
list-style-type: none;
float: left;
}
#roll ul li a{
color: #090;
text-decoration: none;
border-bottom: 1px dotted;
}
#roll ul li.hide a{
color: #900;
}
#roll ul li.show div{
display: block;
border: 1px solid #000;
margin: 0.5em;
padding: 0.5em;
}
#roll ul li.hide div{
display: none;
}
p{
margin: 1em 0 0 1em;
white-space: pre;
}
</style>
<body>

<div id="roll">
<ul>
<li id="block1" class="show"><a href="#" onclick="showHide(1);" id="lnk1">Сейчас показан 1</a><div>Текст 1 блока</div></li>
<li id="block2" class="hide"><a href="#" onclick="showHide(2);" id="lnk2">Показать 2</a><div>Текст 2 блока</div></li>
<li id="block3" class="hide"><a href="#" onclick="showHide(3);" id="lnk3">Показать 3</a><div>Текст 3 блока</div></li>
<li id="block4" class="hide"><a href="#" onclick="showHide(4);" id="lnk4">Показать 4</a><div>Текст 4 блока</div></li>
<li id="block5" class="hide"><a href="#" onclick="showHide(5);" id="lnk5">Показать 5</a><div>Текст 5 блока</div></li>
</ul>
</div>
<p>Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.
</p>
<p>Последние два абзаца к коду отношения не имеют, просто холодно сейчас. ;)
</p>
</body>
</html>

  • 3

#3 Avin

Avin
    Topic Starter
  • Пользователь
  • 82 сообщений
  • Репутация: 1

Отправлено 19 Декабрь 2012 - 12:37

Выражаю огромную благодарность yury! Спасибо!
  • 0

#4 verstaka

verstaka
  • Пользователь
  • 6 сообщений
  • Репутация: 2

Отправлено 11 Январь 2013 - 16:32

http://jsfiddle.net/verstaka/N4qee/ - набросал эту простую задачку на jQuery, может кому пригодится.
  • 0


Оформление форума – IPBSkins.ru