Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2015, 19:06
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

Показать/скрыть <div>
Подскажите, пожалуйста, как реализовать следующую задачу.


Есть два DIVа

<div id='first'></div>

<div id='second'></div>


1.После загрузки страницы, <div id='first'></div> должен отображать содержимое, а <div id='second'></div> не отображает.

2.При нажатии ссылки "Далее" <div id='first'></div> должен скрыть содержимое, а <div id='second'></div> наоборот отобразить.

3.Внутри второго <div id='second'> есть ссылка "Назад", при нажатии на которую <div id='first'> опять отображает, а <div id='second'> нет.

С ув.
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2015, 20:50
Аспирант
Посмотреть профиль Найти все сообщения от losos100
 
Регистрация: 21.01.2015
Сообщений: 39

<html>
<head>
</head>
 
<body>


<div id='first'>first</div>
<div id='second' style="display: none">second</div>
<a id="back">back</a>
<a id="forward">forward</a>


<script>
get=document.querySelector.bind(document)
first=get("#first")
second=get("#second")
f=function(){
 if(this.id==="back") {
   first.style.display="block"; second.style.display="none"
 }else{
   first.style.display="none"; second.style.display="block"
 }
}
;[get("#back"), get("#forward")].forEach(function(e){e.onclick=f})
</script>
</body>
 
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2015, 20:56
Аспирант
Отправить личное сообщение для veltony Посмотреть профиль Найти все сообщения от veltony
 
Регистрация: 10.01.2015
Сообщений: 54

Большое спасибо.
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2015, 00:28
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,433

<div id='first'>first</div>
<div id='second' style="display: none">second</div>
<a id="back">back</a>
<a id="forward">forward</a>
<script>
  Array.apply(null, document.querySelectorAll('#back, #forward')).map(function (element) {
    element.addEventListener("click", navigation);
  });
  function navigation() {
    var style = {
      back: ["block", "none"],
      forward: ["none", "block"]
    }[this.id];
    first.style.display = style[0];
    second.style.display = style[1];
  }
</script>
:)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
UserJS скрывающий <div> Waspwort Общие вопросы Javascript 9 26.02.2013 23:26
Поменять местами два <div> Bay Events/DOM/Window 11 11.02.2013 21:37
Событие для тега <div> при обращении к нему через якорь dima_web Элементы интерфейса 1 11.01.2013 17:38
изменение размеров <div> при помощи <select> zerojava Элементы интерфейса 2 21.12.2012 23:15
Пустой текстовый блок между <div> Telnet (X)HTML/CSS 8 23.11.2012 17:16