Форум

veltony · #1 (**permalink**) 22.01.2015, 19:06

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

Есть два 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'> нет.

С ув.

losos100 · #2 (**permalink**) 22.01.2015, 20:50

<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>

veltony · #3 (**permalink**) 22.01.2015, 20:56

Большое спасибо.

Vlasenko Fedor · #4 (**permalink**) 23.01.2015, 00:28

<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>
:)

Форум

Справочник

Discord чат

Курсы javascript