переход по дивам с помощью одной кнопки
В общем у меня есть 20 контейнеров
<div class="content" id="content1" > *** <div class="content" id="content20" > ну и всех блоков есть свойство display:none. и есть ссылка <a class="codrops-icon codrops-icon-drop" ><span>Back to the Codrops Article</span></a> и <a class="codrops-icon codrops-icon-prev" ><span>Previous Demo</span></a> Нужно сделать чтобы при щелчке по первой ссылке дивы показывались в порядке возрастания id, а при второй ссылке уменьшались. То есть получилось бы типа книжки. Ребят помогите пожалуйста. |
sonntagausgang,
приложите хоть какие-то силы, на форуме этих вариантов полно http://javascript.ru/forum/showthrea...886#post229886 |
Цитата:
<style>.content {display: none}</style> <div class="content">текст 1</div> <div class="content">текст 2</div> <div class="content">текст 3</div> <div class="content">текст 4</div> <div class="content">текст 5</div> <div class="content">текст 6</div> <div class="content">текст 7</div> <div class="content">текст 8</div> <a href="#" id="back">Back</a> <a href="#" id="next">Next</a> <script> var contents = document.getElementsByClassName('content'); var nowContent = 0; contents[nowContent].style.display = 'block'; document.getElementById('back').onclick = function(){changeContent(nowContent -1)}; document.getElementById('next').onclick = function() { changeContent(nowContent +1)}; function changeContent(news) { if (news < 0) news = contents.length - 1; else if (news > contents.length -1) news = 0; contents[nowContent].style.display = 'none'; contents[news].style.display = 'block'; nowContent = news; } </script> только учтите, что для ИЕ8- надо getElementsByClassName создавать. Или подключать jQuery. Или делать поиск по ID, но учитывать, что при увеличении статей надо будет и скрипт исправлять. В общем возможны варианты. |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 14:52. |