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



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

#1 Avin
Avin
  • Неактивные
  • 82 сообщений
  • Репутация: 1
0

Обновлено 11 января 2013 - 16:32  Отправлено 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
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 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



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография kuztoday
    #3

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография SergiuS85
    #4

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Megoydagi
    #5

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #6

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #7

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография wp01
    #8

    wp01
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография Totti
    #9

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 7.5 1 тема, 2 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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