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


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 525 Вне конкурса за определение пользователя месяца

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

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

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

    Vmir
    Очков активности: 346.5 3 темы, 24 сообщения, 7 баллов репутации

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

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

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

    Mandarin
    Очков активности: 76.5 2 темы, 11 сообщений, 3 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #7

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

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

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

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

    pozitron123
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

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

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

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.03.2019
  • Яндекс выдача: 18.04.2019
Топ 5 участников по репутации


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
  • Пользователь
  • 647 сообщений
  • Репутация: 192

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