Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Написать toggle menu (https://javascript.ru/forum/misc/17505-napisat-toggle-menu.html)

Just In Live 22.05.2011 07:32

Написать toggle menu
 
нужно такое меню:

меню 1
меню 2
меню 3

процесс: щелкну например на меню 2 - все остальные меню пропадают, и у каждого меню должена быть урл например mysite.ru/#menu1 mysite.ru/#menu2 итд.

monolithed 22.05.2011 10:02

Nemo, сложно посмотреть алгоритм в соседней теме?

Just In Live 22.05.2011 10:24

мне нужно сдлеать так что бы
по mysite/#main открывался блок <div id="main"

monolithed 22.05.2011 10:38

видимо так:
document.getElementById(window.location.hash).onclick = function() {
    [...]
};

Just In Live 22.05.2011 10:43

допустим вот код
<html>
<head>
	<script>
		// Обворачиваем функцию toggle в локальное замыкание:
		var toggle = function() {
			// Ссылка на текущий открытый div:
			var currentDiv = null;
			
			// Функция для "раскрытия" элемента:
			function open(divElement) {
				// Тут можно добавить эффект "плавного" открытия:
				divElement.style.display = "block";
				currentDiv = divElement;
			}
			
			// Функция для "закрытия" элемента:
			function close(divElement) {
				// Тут можно добавить эффект "плавного" закрытия:
				divElement.style.display = "none";
				currentDiv = null;
			}
			
			// Возвращаем функцию, которая будет вызываться по toggle()
			return function(divID) {
				// Получаем элемент из DOM
				var divElement = document.getElementById(divID);
				// Если такой есть:
				if (divElement) {
					// Если уже открыт какой-то div - закрываем.
					if(currentDiv != null) close(currentDiv);
					// Открываем вызваный.
					open(divElement);
				}
			}
		// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
		}();
		
		


	</script>
	<style>
		.myDiv {
			display: none;
		}
	</style>
</head>
<body>
	<a id="menu1" href="javascript://" onClick="toggle('div1')">Link1</a>
	<div class="myDiv" id="div1">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div2')">Link2</a>
	<div class="myDiv" id="div2">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
	
	<a href="javascript://" onClick="toggle('div3')">Link3</a>
	<div class="myDiv" id="div3">
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
		Содержание<br />
	</div>
	<br />
</body>
</html>




мне что нужно ьдописать это?
document.getElementById(window.location.menu1).onc lick = toggle('div1');

Just In Live 22.05.2011 10:46

неканает помоги довести

Just In Live 22.05.2011 11:22

здешние хелперы" САМЫЕ ОПТЫТНЫЕ НАСТОЛЬКО ЧТО ИХНЯЯ АКТИВНОСТЬ ТОЛЬКО ВЕСТИ В ВАКАНСИЯХ ПРИЧЕМ БЕСКОНЕЧНО ИХ ВСЕ ТАМ НЕУСТРАИВАЕТ"

monolithed 22.05.2011 11:38

Цитата:

Сообщение от Just In Live
мне что нужно ьдописать это?

<script>
window.onload = function() {
    var links = document.getElementById('menu').getElementsByTagName('a'),
        i = links.length;
    while(i--) {
          links[i].onclick = function() {
              var str = this.hash.replace(/#/, ''),
                  dd = document.getElementById(str),
                  childrens = dd.parentNode.children,
                  i = childrens.length;

              while(i--) {
                  var node = childrens[i];
                  if(node.nodeName == 'DD' && node.id != str) {
                      node.style.display = '';
                  }
             }
             dd.style.display = (dd.style.display == '') ? 'block' : '';
             return false;
         };
    }
};
</script>
<dl id="menu">
    <dt><a href="#link1">click1</a></dt>
    <dd id="link1">text1</dd>
    <dt><a href="#link2">click2</a></dt>
    <dd id="link2">text2</dd>
    <dt><a href="#link3">click3</a></dt>
    <dd id="link3">text3</dd>
</dl>
<style>
dd {display: none;}
</style>

Just In Live 22.05.2011 11:42

какая строка в урл должнв быть что бы меню сработало? /#link1 неработет

monolithed 22.05.2011 11:48

Цитата:

Сообщение от Just In Live
какая строка в урл должнв быть что бы меню сработало? /#link1 неработет

в ссылки записывается хеш, он и попадает в урл. вообще идея какая-то бредовая


Часовой пояс GMT +3, время: 06:18.