Меню на DIV'ах и DHTML
Суть:
Код:
<html> |
Hyuga_Nia, почему блоки не внутри
<li>...</li> ? |
И никакого JS...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li div {
display: none;
}
li:hover div {
display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li>1. Click here!
<div>
Тут текст дива 1
</div>
</li>
<li>2. Or here!
<div>
А тут 2. Ваш Кэп.
</div>
</li>
<li>3. Also here!
<div>
Ну и наконец, 3 десу!
</div>
</li>
</ul>
</body>
</html>
|
Цитата:
2. Надо не onmouseover, а onclick. 3. А на чистом DHTML, без JavaScript не получится? 4. Что значит "[HTML run]"? И звёздочка в стилях? 5. UPD: Проблема еще осложнена наличием других дивов на странице, которые трогать не надо. 6. Посмотрел библиотеку. O_o Это что ж, всю ее надо будет сохранить, если я не хочу использовать внешние материалы (ибо сайт должен быть автономным и не зависеть от этих ваших интернетов)?! |
Цитата:
Цитата:
Цитата:
Для всех элементов... Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
То есть, нет такой функции в DHTML "присвоить стиль всем дивам"? Те, которые не трогать, и тот, который нужен, можно заново включить потом. Цитата:
В смысле, "всё отключено"? Что отключено? Цитата:
20*30=500 р… А, какая разница, у меня сейчас все равно и 100 нету... Fuuuuuuuuuuuuuuuuu… |
// Прячем все дивы
var divs = document.getElementsByTagName('div');
for(i = 0;i < divs.length;i++)
divs[i].style.display = 'none';
//Показываем нужный див
document.getElementById('div_kotorii_nujen').style.display = 'block';
Ну естественно что вместо поиска дивов по всему документу, вам нужно искать по какому ту ихнему общему родителю. Или вообще лучше по классам обращайтесь к дивам |
Цитата:
Только несколько вопросов. 1. А без JavaScript таки никак, да? 2. А как эту функцию показа и скрытия дивов к событию onclick присоединить? 3. Чтобы не делать отдельную функцию для каждого пункта меню... Как сделать, чтобы функция выполнялась не сама по себе, а от числа, которое уже у каждого пункта меню задаётся индивидуально? Ну как в алгебре... f(x)… x=div_kotorii_nujen 4. А если по общему родителю – покажется ли нужный див? Он же будет внутри скрытого общего родителя... И зачем тогда JavaScript? Я пытался их в один див объединить, и скрывать див 1, показывая, скажем, див 1.1... После скрытия общего дива (1) ничего больше не показывается... P. S. Кстати, у меня не block, а run-in… |
<ul>
<li onclick="showHide('first');return false;">First</li>
<li onclick="showHide('second');return false;">Second</li>
<li onclick="showHide('third');return false;">Third</li>
</ul>
<div id="container">
<div style="display: none;" id="first">First</div>
<div style="display: none;" id="second">Second</div>
<div style="display: none;" id="third">Third</div>
</div>
<script>
var container = document.getElementById('container');
function showHide(id) {
var divs = container .getElementsByTagName('div');
for(i = 0;i < divs.length;i++)
divs[i].style.display = 'none';
document.getElementById(id).style.display = 'run-in';
}
</script>
|
| Часовой пояс GMT +3, время: 01:39. |