Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2013, 10:15
Новичок на форуме
Отправить личное сообщение для m.koloskov Посмотреть профиль Найти все сообщения от m.koloskov
 
Регистрация: 27.09.2012
Сообщений: 1

Пожалуйста помогите с простым скриптом.
Мой скрипт. при клике на NEXT добавляет активный класс следующему элементу. Нужно дополнить: Если элемент последный, добавить class = «active» Первому.

HTML:
<ul class=«pagination»>
<li class=«active»><a class=«one» href="#">X</a></li>
<li><a class=«two» href="#">X</a></li>
<li><a class=«three» href="#">X</a></li>
</ul>

<a href="" class=«next»>Next</a>
<a href="" class=«prev»>Prev</a>

JS:
$('.next').click(function(){
$('ul.pagination').find('li.active').removeClass(' active').next().addClass('active');
return false;
});

CSS:
.active a {background:red;}
Ответить с цитированием
  #2 (permalink)  
Старый 28.01.2013, 11:06
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

var items = $('ul.pagination').children();
var index = 0;
$('.next, .prev').click(function(e){
    items.eq(index).removeClass('active');
    if (this.className == 'next')
        index = (index == items.length-1) ? 0 : ++index;
    else 
        index = (index == 0) ? items.length-1 : --index;
    items.eq(index).addClass('active');
    e.preventDefault();
});

Последний раз редактировалось danik.js, 28.01.2013 в 11:31.
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2013, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,611

m.koloskov,
Вариант...
<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
.active a {background:red;}
</style>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.next').click(function(){
var next = $('ul.pagination').find('li.active').removeClass('active').next()
next.index() < 0 &&(next = $("ul.pagination li:first"));
next.addClass('active');
 return false;
 });
$('.prev').click(function(){
var prev = $('ul.pagination').find('li.active').removeClass('active').prev()
prev.index() < 0 &&(prev = $("ul.pagination li:last"));
prev.addClass('active');
 return false;
 });
});
</script>
</head>

<body>
<ul class="pagination">
 <li class="active"><a class="one" href="#">X</a></li>
 <li><a class="two" href="#">X</a></li>
 <li><a class="three" href="#">X</a></li>
 </ul>
<a href="" class="next">Next</a>
<a href="" class="prev">Prev</a>
</body>
</html>

Последний раз редактировалось рони, 03.10.2013 в 22:12. Причина: кнопки вперёд назад
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2013, 11:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

jquery портит людей )
jquery заставляет делать все через dom-манипуляцию и перемещение по dom-у. Цепочки заставляют отказываться от "кэширования" в переменные.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста разобраться со скриптом Shalty Opera, Safari и др. 1 21.01.2013 14:41
ПОЖАЛУЙСТА Помогите со скриптом pavdin Элементы интерфейса 15 14.12.2012 13:16
Помогите со скриптом, пожалуйста. ScreamSpb777 Элементы интерфейса 1 19.10.2010 16:22
Помогите пожалуйста со скриптом подсчета! CollaiderKV Общие вопросы Javascript 13 09.04.2010 08:24
Помогите со скриптом, пожалуйста! sqrter Общие вопросы Javascript 1 29.07.2009 16:55