X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> JavaScript скрыть показать блок, при открытии одного, другие скрываются, как?
Avin
Avin
Topic Starter сообщение 19.12.2012, 10:31; Ответить: Avin
Сообщение #1


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

Столкнулся с проблемой, что незнаю как скрыть/показать блок (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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 19.12.2012, 12:20; Ответить: yury_mw
Сообщение #2


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>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Avin
Avin
Topic Starter сообщение 19.12.2012, 13:37; Ответить: Avin
Сообщение #3


Выражаю огромную благодарность yury! Спасибо!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
verstaka_mw
verstaka_mw
сообщение 11.1.2013, 17:32; Ответить: verstaka_mw
Сообщение #4


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как в пушсетках покупают по 100-200 тысяч кликов за день?
 2 Boymaster 695 Вчера, 17:52
автор: Boymaster
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
 151 adw-kupon.ru 19861 23.4.2024, 13:52
автор: Vmir
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
 20 uahomka 3475 23.4.2024, 11:54
автор: Skyworker
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
 30 freeax 5041 20.4.2024, 16:49
автор: Liudmila
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
 13 Boymaster 2036 20.4.2024, 15:06
автор: Boymaster


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 11:53

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet