Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2013, 22:42
Интересующийся
Отправить личное сообщение для sonntagausgang Посмотреть профиль Найти все сообщения от sonntagausgang
 
Регистрация: 24.05.2013
Сообщений: 25

переход по дивам с помощью одной кнопки
В общем у меня есть 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, а при второй ссылке уменьшались.

То есть получилось бы типа книжки. Ребят помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2013, 23:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

sonntagausgang,
приложите хоть какие-то силы, на форуме этих вариантов полно http://javascript.ru/forum/showthrea...886#post229886
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2013, 23:36
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от sonntagausgang
Нужно сделать чтобы при щелчке по первой ссылке дивы показывались в порядке возрастания id, а при второй ссылке уменьшались.
<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, но учитывать, что при увеличении статей надо будет и скрипт исправлять. В общем возможны варианты.
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2013, 05:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от BETEPAH
только учтите, что для ИЕ8- надо getElementsByClassName создавать
В таких случаях лучше всего использовать querySelectorAll, который поддерживается в IE8. Задумываться о IE6 - 7 - себя не уважать. Тогда уж и про IE5.5 думай, чё.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2013, 10:19
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от danik.js
Задумываться о IE6 - 7 - себя не уважать. Тогда уж и про IE5.5 думай, чё.
Бесспорно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
prompt,открытие нового окна с помощью кнопки Ксения7595 Элементы интерфейса 3 29.05.2013 15:28
Как реализовать переход с одной страницы на другую с помощью клавиш "стрелок" bazilio2010 Общие вопросы Javascript 6 13.11.2011 23:58
Переход между textarea с помощью клав-ры virus-07 Events/DOM/Window 2 15.09.2011 15:35
Анимированные кнопки с помощью jQuery a_c jQuery 9 11.04.2011 18:55
Форма и 3 кнопки, Как реализовать переход? jsuse Элементы интерфейса 1 10.04.2010 21:52