Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Скрипты для сокрытия слоев


Автор: martin 29.10.2004, 17:34
Помогите разобраться.

На странице слои, по умолчанию скрытые. При клике на линк "Показать" запускается скрипт:
Код
<!--
function putElem(elemId)
{var t=document.getElementById(elemId);
t.style.display= "block";}

function removeElem(elemId)
{var t=document.getElementById(elemId);
t.style.display= "none";}
// -->

Действие:
Код
<A onclick="putElem('layer1'); return false;" href="">Показать</A>
<DIV class="hide" id="layer1">
<P>текстекстекст.
</DIV>

Слой layer1 открылся.

Еще есть слой 2, слой 3, 4, ... 12. Все определяются по номерному id.

Чтобы закрыть слой, я использую функцию removeElem: <a href="" onClick="removeElem('layer1'); return false;">Спрятать</a>

Слой layer1 закрылся. То же и слой 2, 3, ...

Задача 1
При открытии слоя - спрятать линк "Показать". С глаз долой.

Как ее решить?
Можно положить линк "Показать" в контейнер <div id="layer0">, и к событию onclick добавить layer0.style.display="none".

Действие:
Код
<A onclick="putElem('layer1'); return false;" href="">
<div id="layer0">Показать</div>
<DIV id="layer1">
<P>текстекстекст.
</DIV>

Но это сработает, если на странице только один слой. А у меня их, предположим, три. Добавлять к событию onclick layer[порядковый номер].style.display="none" - ошибочно (убедился).

Подсказали добрые люди: функция принимает 2 значения - id слоя который надо спрятать и id слоя который надо показать. И больше подсказывать не стали.

Как это написать? Как будет выглядеть скрипт?

Задача 2
На другой странице ситуация со слоями в тексте повторяется. Но здесь было бы намного удобнее, если бы слой появлялся и прятался при клике на одном и том же линке - "Подробнее", например.

Как это осуществить?

Автор: Step 29.10.2004, 17:49
Цитата(martin @ 29.10.2004, 17:34)

Подсказали добрые люди: функция принимает 2 значения - id слоя который надо спрятать и id слоя который надо показать. И больше подсказывать не стали.

http://forum.vingrad.ru/index.php?showtopic=32978

Автор: sergejzr 29.10.2004, 17:55
А вот примерное решение второго вопроса :)
Код
function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display== "block"?t.style.display="hide":t.style.display="block";
}


На форуме предусмотрена подсветка кода. Вы ей не воспользовались. Сообщите пожалуйста, какие трудности у вас возникли по этому поводу :)


Пожалуйста, соблюдайте правила форума

один топик - один вопрос

Автор: martin 29.10.2004, 18:52
sergej.z
стормозил :)
понял, отныне только онтоп.

благодарю, иду пробовать.
думать иду.

Автор: martin 29.10.2004, 22:14
Step
Спасибо. Я успешно не разобрался. Знаний мало.

sergej.z Итак:
Код
<script type="text/javascript">
<!--
function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display== "block"?t.style.display="hide":t.style.display="block";
}
// -->
</SCRIPT>


<a href="" onClick="show_hide_Elem('layer1'); return false;">Подробности</a>.

<div id="layer1"> (по умолчанию скрытый)

<p>Пару слов о серьезном.
</div>

Нужно, чтобы при клике на "Подробности" слой layer1 появлялся, а при повторном клике - прятался обратно.

В Опера7:
слой открывается, и обратно закрываться не желает. И тишина.

В ИЕ6:
открываю файл из C:\Documents and Settings\user\My Documents\about.html

Линк, обрабатываемый этой функцией, ведет в никуда. Точнее - указывает прямиком на file:///C:/Documents%20and%20Settings/user/My%20Documents/

Жмем раз - слой открылся.
Жмем второй раз - и в браузере... показывается содержимое C:\Documents and Settings\user\My Documents

:angry:

Что делать?

Автор: sergejzr 29.10.2004, 23:26
Вот, посмотрите :)
Это ессно не готовое решение :)
Код

<html>
<head>

<title>VPF::Форум программистов Vingrad</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<script type="text/javascript">
<!--
function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.visibility=="hidden"?t.style.visibility="visible":t.style.visibility="hidden";
}
// -->
</SCRIPT>


<a id="MyControl" onClick="show_hide_Elem('layer1');"><u>Подробности</u></a>.

<div id="layer1">

<p>Пару слов о серьезном.
</div>

</body></html>

Автор: Alx 1.11.2004, 11:41
вот решение первого вопроса:

Код

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<script>
function showHideFunc(act,obj,but)
{if (act == "show")
{document.getElementById(obj).style.display = "block";
window.event.srcElement.style.visibility = "hidden";
document.getElementById(but).style.visibility = "visible";
}
else
if (act == "hide")
{document.getElementById(obj).style.display = "none";
window.event.srcElement.style.visibility = "hidden";
document.getElementById(but).style.visibility = "visible";
}
}
</SCRIPT>
<basefont face="Verdana" size="2">
<a id="lnk1show" href="#" onclick="showHideFunc('show','div1','lnk1hide');">Показать</a> | <a id="lnk1hide" href="#" onclick="showHideFunc('hide','div1','lnk1show');">Спрятать</a>
<div id="div1" style="display:none;background:white;">
Первый слой
</div>
<br><br>
<a id="lnk2show" href="#" onclick="showHideFunc('show','div2','lnk2hide');">Показать</a> | <a id="lnk2hide" href="#" onclick="showHideFunc('hide','div2','lnk2show');">Спрятать</a>
<div id="div2" style="display:none;background:lightblue;">
Второй слой
</div>
<br><br>
<a id="lnk3show" href="#" onclick="showHideFunc('show','div3','lnk3hide');">Показать</a> | <a id="lnk3hide" href="#" onclick="showHideFunc('hide','div3','lnk3show');">Спрятать</a>
<div id="div3" style="display:none;background:red;">
Третий слой
</div>
</body>
</html>


второго:
Код

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<script>
function showHideFunc(obj)
{if (document.getElementById(obj).style.display == "block")
{document.getElementById(obj).style.display = "none";
window.event.srcElement.innerText = "Показать";
}
else
if (document.getElementById(obj).style.display != "block")
{document.getElementById(obj).style.display = "block";
window.event.srcElement.innerText = "Скрыть";
}
}
</SCRIPT>
<basefont face="Verdana" size="2">
<a href="#" onclick="showHideFunc('div1');">Показать</a>
<div id="div1" style="display:none;background:white;">Первый слой</div>
<br>
<a href="#" onclick="showHideFunc('div2')">Показать</a>
<div id="div2" style="display:none;background:lightblue;">Второй слой</div>
<br>
<a href="#" onclick="showHideFunc('div3');">Показать</a>
<div id="div3" style="display:none;background:red;">Третий слой</div>
</body>
</html>


в втором случае меняется содержимое ссылки с "открыть" на "скрыть" и наоборот. при желании это можно убрать, удалив строки

Цитата
window.event.srcElement.innerText = "Показать";
window.event.srcElement.innerText = "Скрыть";


и заменив содержимое ссылок с "Показать" на "Подробности".

Автор: Sardar 1.11.2004, 21:02
ALEXANDRO вместо window.event.srcElement который существует только в IE и Опере лучше передавать сслыку на самого себя(this) или на дочерний тег еще одним аргументом функции. Пиши кросс-браузерно ;-)

Автор: Alx 2.11.2004, 14:51
ок :) запомню.

Автор: martin 5.11.2004, 12:56
Большое спасибо. Приятный во всех отношениях форум.

Я понял принцип.

О частностях: для пункта два, мне кажется, что целесообразнее решение через (elemId).

Напомню, что по умолчанию слои на странице абсолютно скрыты. Напрочь. Через параметр display. Переписал так:

Код

function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display=="block"?t.style.display="none":t.style.display="block";
}

Кстати, намного удобнее, если слово "Показать" (в моем случае) действительно является линком (href=""), тогда и title="Показать/Спрятать слой" можно добавить. К onclick="такая-то функция" нужно добавить return false, и все будет в порядке.

Пример:
[/code]
HTML
<a href="" onClick="show_hide_Elem('layer1'); return false;" title="Показать/Спрятать слой">Шашки наголо!</a>.

Автор: Sardar 5.11.2004, 14:35
Также можно вообще отказатся от якорей и использовать span, что логичнее и не несет побочных эффектов smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)