Показать/скрыть <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'> нет. С ув. |
<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>
|
Большое спасибо.
|
<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>
:)
|
| Часовой пояс GMT +3, время: 15:04. |