Javascript.RU

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

Поочередное выцветание элементов.
Привет.
Есть неcколько div, у которых style = "display: none;" , при нажатии на соответствующие кнопки, они появляются. Как сделать так, чтобы при нажатии на следующую кнопку, предыдущий div исчезал? Заранее спасибо.


<biv>
    <button onclick="$('#div1').fadeIn()"> div1 </button>
    <button onclick="$('#div2').fadeIn()"> div2 </button>
    <button onclick="$('#div3').fadeIn()"> div3 </button>
</biv>

<div id="div1" style = "display: none;"></div>
<div id="div2" style = "display: none;"></div>
<div id="div2" style = "display: none;"></div>

Последний раз редактировалось igory, 14.09.2013 в 00:05.
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2013, 04:01
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от igory
<biv>
А это что еще за элемент? Или я не успеваю следить за HTML5 нововведениями?
На манер текущего твоего кода:
<biv>
    <button onclick="$('#div1').fadeIn()"> div1 </button>
    <button onclick="$('#div1').fadeOut();$('#div2').fadeIn()"> div2 </button>
    <button onclick="$('#div2').fadeOut();$('#div3').fadeIn()"> div3 </button>
</biv>
 
<div id="div1" style = "display: none;"></div>
<div id="div2" style = "display: none;"></div>
<div id="div2" style = "display: none;"></div>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2013, 12:25
Аватар для igory
Интересующийся
Отправить личное сообщение для igory Посмотреть профиль Найти все сообщения от igory
 
Регистрация: 08.07.2013
Сообщений: 10

Спасибо за ответ, danik.js.
Ну да, конечно же я опечатался А что если div будет не 3 а больше и нажимаем не на первый, второй и третий по очереди, а в любом порядке.
Кроме как то что я сделал, как-нибудь по-грамотнее делают?

<div>
    <button onclick="$('.menu ').fadeOut().delay(500);$('.div1').fadeIn()"> div1 </button>
    <button onclick="$('.menu ').fadeOut().delay(500);$('.div2').fadeIn()"> div2 </button>
    <button onclick="$('.menu ').fadeOut().delay(500);$('.div3').fadeIn()"> div3 </button>
</div>
  

<div class = "menu div1" style = "display: none;"></div>
<div class = "menu div2" style = "display: none;"></div>
<div class = "menu div2" style = "display: none;"></div>
Ответить с цитированием
  #4 (permalink)  
Старый 15.09.2013, 19:55
Интересующийся
Отправить личное сообщение для andrewinc Посмотреть профиль Найти все сообщения от andrewinc
 
Регистрация: 19.09.2012
Сообщений: 10

Думаю, грамотнее будет добавить :visible
<button onclick="$('.menu:visible').fadeOut().delay(500);$('.div1').fadeIn()"> div1 </button>

чтобы команда растворения применялась только к видимому div'у
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18
Поочередное появление элементов <tr> gromitsu jQuery 3 27.11.2011 21:20