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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

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

    Ixman (o5cat.ru)
    Очков активности: 90 0 тем, 10 сообщений, 6 баллов репутации

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

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

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

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

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

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

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

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

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

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

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

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

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

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

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

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


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

#1 Avin

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

Отправлено 19 December 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 19 December 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 December 2012 - 12:37

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

#4 verstaka

verstaka
  • Неактивированные
  • 6 сообщений
  • Репутация: 2

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

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



Похожие темы

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

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