менюха для того кто не бум бум в js - JavaScript, Ajax

mrgrudge · 15.04.2010, 17:53

дело вот в чем есть список из трех элементов

типа

Код:

<a> 1</a>
<ul>
  <li>1-1</li>
  <li>1-2</li>
  <li>1-3</li>
</ul>

<a> 3</a>
<ul>
  <li>2-1</li>
  <li>2-2</li>
  <li>2-3</li>
</ul>

<a> 3</a>
<ul>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

как бы вывод нужных строк за счет php то я реализовал, вопрос вот в чем как с помощью js сделать так чтоб изначально списки <ul>...</ul> Не были видны (очевидно style='display:none;') а при клике на <a>..</a> он появлялся, кликаешь на другое <a>...</a> тот сварачивается выползает нужный во как....сперва делал с помощью css и hover {display:block;} но в IE это не рабит,списки либо не показываются либо постоянно видимы...для знатоков js то навено не проблема а вот я всю голову поломал уже=\

spein · 15.04.2010, 19:47

js clean:

Код HTML:

<script>
function showhide(el) {
el = document.getElementById(el);
if(el.style.display!='none') {
el.style.display='none';
} else {
el.style.display='block';
}
}
</script>
<a OnClick="showhide('1')"> 1</a><br>
<ul id='1' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide('2')"> 3</a><br>
<ul id='2' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide('3')"> 3</a><br>
<ul id='3' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>/li>
</ul>

mrgrudge · 27.04.2010, 16:21

все работает, спс огромное, а можно его как то модифицировать чтоб когда вот ткнул по сслык 1 открылся список 1, ткнул по ссылке 2 открылся список 2 а список 1 скрылся??

(IICuX) · 27.04.2010, 23:32

Цитата:

Сообщение от mrgrudge

все работает, спс огромное, а можно его как то модифицировать чтоб когда вот ткнул по сслык 1 открылся список 1, ткнул по ссылке 2 открылся список 2 а список 1 скрылся??

Код:

<script>
function showhide(el) {
el = document.getElementById(el);
if(el.style.display!='none') {
el.style.display='none';
} else {
el.style.display='block';
}
}
function hide(el1, el2)
{
	document.getElementById(el1).style.display='none';
	document.getElementById(el2).style.display='none';	
}
</script>
<a OnClick="showhide('1'), hide('2','3');"> 1</a><br>
<ul id='1' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide('2'), hide('1','3');"> 2</a><br>
<ul id='2' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide('3'), hide('1','2');"> 3</a><br>
<ul id='3' style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul></li>
</ul>

Vertexxx · 28.04.2010, 01:28

А я пошёл вот каким вариантом. Правда до конца не доделал, ибо подустал что-то я

В ИЕ работает так, что при открытии какого-нить блока соседние с ним блоки закрываются, Файрфокс и иже с ним не доделал - там все просто открывается и закрывается, но смысл, как мне кажется понятен, в чем там дело. Итак

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Untitled 1</title>
</head>

<body>

<script type="text/javascript">
function showhide(el) {
    if(document.all){ // ИЕ
        if(el.nextSibling && el.previousSibling){
            var next = el.nextSibling;
            var prev = el.previousSibling;     
            if(next.nextSibling.style.display!='none') {            
                next.nextSibling.style.display='none';
            } else {
                next.nextSibling.style.display='block';
                prev.style.display='none';
                if(next.nextSibling.nextSibling){
                    next.nextSibling.nextSibling.nextSibling.nextSibling.style.display='none';   
                }        
            }
        }else{
            if(e.nextSibling.style.display!='none') {            
                e.nextSibling.style.display='none';
            } else {
                e.nextSibling.style.display='block';
            }
        }
    }else{// Firefox etc...
        if(el.nextSibling.nextSibling.nextSibling.style.display!='none') {
            el.nextSibling.nextSibling.nextSibling.style.display='none';
        } else {
            el.nextSibling.nextSibling.nextSibling.style.display='block';
        }
    }
}
</script>
<a OnClick="showhide(this)"> 1</a><br>
<ul style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide(this)"> 2</a><br>
<ul style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

<a OnClick="showhide(this)"> 3</a><br>
<ul style='display:none;'>
  <li>3-1</li>
  <li>3-2</li>
  <li>3-3</li>
</ul>

</body>
</html>

15.04.2010, 17:53	#1
mrgrudge Форумчанин Регистрация: 20.02.2010 Сообщений: 229	менюха для того кто не бум бум в js дело вот в чем есть список из трех элементов типа Код: `<a> 1</a> <ul> <li>1-1</li> <li>1-2</li> <li>1-3</li> </ul> <a> 3</a> <ul> <li>2-1</li> <li>2-2</li> <li>2-3</li> </ul> <a> 3</a> <ul> <li>3-1</li> <li>3-2</li> <li>3-3</li> </ul>` как бы вывод нужных строк за счет php то я реализовал, вопрос вот в чем как с помощью js сделать так чтоб изначально списки <ul>...</ul> Не были видны (очевидно style='display:none;') а при клике на <a>..</a> он появлялся, кликаешь на другое <a>...</a> тот сварачивается выползает нужный во как....сперва делал с помощью css и hover {display:block;} но в IE это не рабит,списки либо не показываются либо постоянно видимы...для знатоков js то навено не проблема а вот я всю голову поломал уже=\ думай как баг, действуй как баг, и ты найдешь баг )

27.04.2010, 16:21	#3
mrgrudge Форумчанин Регистрация: 20.02.2010 Сообщений: 229	все работает, спс огромное, а можно его как то модифицировать чтоб когда вот ткнул по сслык 1 открылся список 1, ткнул по ссылке 2 открылся список 2 а список 1 скрылся?? думай как баг, действуй как баг, и ты найдешь баг ) Последний раз редактировалось mrgrudge; 27.04.2010 в 17:21.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Нужна функция или процедура для того чтобы программа стала резидентной!	star007	Помощь студентам	3	22.03.2010 08:59
2 столбец для того, чтобы автоматически создавались числа, которые позволяли уравнивать числа в 3 столбце	ppv	Microsoft Office Excel	37	05.08.2009 21:19
Не хватает памяти.Из-за того, что Паскаль старый?	delphyok	Паскаль, Turbo Pascal, PascalABC.NET	4	17.05.2009 15:49
switch или что-нибудь типа того	ДядяМиша	PHP	3	30.04.2009 08:17
Народ расскажите кто нужен для создания игры и кто что делает	Kosoy135	Gamedev - cоздание игр: Unity, OpenGL, DirectX	1	16.09.2007 18:59