Замена одного скрытого див на другой.
Добрый день У меня такой вопрос. У меня есть горизонтально верхнее меню на странице. Хочу реализовать так чтобы при нажатие например первого меню на страницы появлялся скрытый див относящийся к этому меню. При нажатии на второй скрывался первый и появлялся див от второго меню. Ну вообщем чтобы при онклике на нужное меню все скрывалось и оставалось только одно.
Вот код:
<body>
<script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script>
<a href="javascript: displ('1')">Описание</a> | <a href="javascript: displ('2')">Свойства</a> | <a href="javascript: displ('3')">Технические характеристики</a> | <a href="javascript: displ('4')">Использование</a>
<div id="1" style="display: none;">ТЕКСТ</div>
<div id="2" style="display: none;">ТЕКСТ2</div>
<div id="3" style="display: none;">ТЕКСТ3</div>
<div id="4" style="display: none;">ТЕКСТ4</div>
</body>
Вот сайт где этот пример: http://kexian.ru/?page_id=6:help: :help: |
Как вариант для размышления:
<script type="text/javascript">
window.onload = function(){
document.getElementsByTagName('a')[0].onclick = function(){
var dt = document.getElementsByTagName('dt'), i = dt.length;
while(i--){
return function(){
dt[i].style.display = (dt[i].style.display == '') ? 'block' : '';
};
}
}();
};
</script>
<style type="text/css">
dt {background: red; display: none; width: 100px; height: 50px;}
</style>
<dl>
<dd><a href="#">click</a></dd>
<dt></dt>
</dl>
|
ну здесь всеравно же нуужно два нажатия по меню чтобы оно или закрылось или открылось. Я не силен в джаве. Может есть какаято функция очищающая сценарий
|
Цитата:
Цитата:
Цитата:
|
сделай обработчик к онклик к каждому из меню скрывалось принудительно три остальных и открывался только тот что связанный. работа с свойством дисплау
http://yapro.ru/web-master/javascrip..._stranice.html или можеш сделать один див и менять в нём содержимое через innerHtml |
Djohan,
Алгоритм то простой всё скрыть и показать нужный... id лучше начинать с буквы и того:
<script type="text/javascript">
function displ(b) {
for (var a = 1; a < 5; a++) document.getElementById("d" + a).style.display = "none";
document.getElementById("d" + b).style.display = "block"
};
</script>
<a href="javascript: displ('1')">Описание</a> | <a href="javascript: displ('2')">Свойства</a> | <a href="javascript: displ('3')">Технические характеристики</a> | <a href="javascript: displ('4')">Использование</a>
<div id="d1" style="display: block;">ТЕКСТ1</div>
<div id="d2" style="display: none;">ТЕКСТ2</div>
<div id="d3" style="display: none;">ТЕКСТ3</div>
<div id="d4" style="display: none;">ТЕКСТ4</div>
|
Djohan какой же вы не самостоятельный:
<script type="text/javascript">
window.onload = function(){
var a = document.getElementsByTagName('a'), i = a.length;
while(i--){
a[i].onclick = function(i){
var dt = document.getElementsByTagName('dt');
return function(){
dt[i].style.display = (dt[i].style.display == '') ? 'block' : '';
};
}(i);
}
};
</script>
<style type="text/css">
dl, dt, dd {margin: 0px; padding: 0px;}
dl {border: 1px solid #DDD; float: left; margin-right: 10px; padding: 0px; width: 50px;}
dd, dt {text-align: center;}
dt {background: red; display: none; width: 50px; height: 50px;}
</style>
<dl>
<dd><a href="#">click</a></dd>
<dt>1</dt>
</dl>
<dl>
<dd><a href="#">click</a></dd>
<dt>2</dt>
</dl>
|
да я на учебу уезжал :) ВРемя думать не было. ВОт приехал а тут уже столько советов :) Спасибо большое :) Щас буду разбираться :)
ПЫС: А вообще у меня изучение джавы в планах. Сейчас пока не до этого :( |
Цитата:
|
| Часовой пояс GMT +3, время: 22:30. |