Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2010, 08:10
Аватар для Djohan
Новичок на форуме
Отправить личное сообщение для Djohan Посмотреть профиль Найти все сообщения от Djohan
 
Регистрация: 29.11.2010
Сообщений: 5

Замена одного скрытого див на другой.
Добрый день У меня такой вопрос. У меня есть горизонтально верхнее меню на странице. Хочу реализовать так чтобы при нажатие например первого меню на страницы появлялся скрытый див относящийся к этому меню. При нажатии на второй скрывался первый и появлялся див от второго меню. Ну вообщем чтобы при онклике на нужное меню все скрывалось и оставалось только одно.

Вот код:

<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
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2010, 08:24
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Как вариант для размышления:
<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>

Последний раз редактировалось monolithed, 29.11.2010 в 08:34.
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2010, 08:34
Аватар для Djohan
Новичок на форуме
Отправить личное сообщение для Djohan Посмотреть профиль Найти все сообщения от Djohan
 
Регистрация: 29.11.2010
Сообщений: 5

ну здесь всеравно же нуужно два нажатия по меню чтобы оно или закрылось или открылось. Я не силен в джаве. Может есть какаято функция очищающая сценарий
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2010, 08:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от Djohan
здесь всеравно же нуужно два нажатия
Таки написали тебе
Сообщение от monolithed
вариант для размышления
Сообщение от Djohan
Я не силен в джаве
Не те размышления...
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2010, 08:47
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

сделай обработчик к онклик к каждому из меню скрывалось принудительно три остальных и открывался только тот что связанный. работа с свойством дисплау
http://yapro.ru/web-master/javascrip..._stranice.html
или можеш сделать один див и менять в нём содержимое через innerHtml
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2010, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #7 (permalink)  
Старый 29.11.2010, 09:25
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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>

Последний раз редактировалось monolithed, 29.11.2010 в 09:30.
Ответить с цитированием
  #8 (permalink)  
Старый 29.11.2010, 12:40
Аватар для Djohan
Новичок на форуме
Отправить личное сообщение для Djohan Посмотреть профиль Найти все сообщения от Djohan
 
Регистрация: 29.11.2010
Сообщений: 5

да я на учебу уезжал ВРемя думать не было. ВОт приехал а тут уже столько советов Спасибо большое Щас буду разбираться

ПЫС: А вообще у меня изучение джавы в планах. Сейчас пока не до этого
Ответить с цитированием
  #9 (permalink)  
Старый 29.11.2010, 13:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от Djohan
Сейчас пока не до этого
На первом плане захват мира?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передать переменную из одного скрипта в другой igorecheg Общие вопросы Javascript 2 14.08.2013 10:17
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Внедрение другой встраницы в див. Suharik Events/DOM/Window 9 20.08.2010 13:00
Передача из одного фрейма в другой Mxnr Events/DOM/Window 4 27.06.2009 12:11
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10