当我点击下一个和上一个箭头时,添加和删除分页.active类

时间:2014-04-28 07:36:08

标签: javascript jquery pagination

我在更改第1,2,3,4,5页

时添加了这个pagination.js脚本
$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  

  });
});

我想为carrousel的prev和下一个箭头添加一个函数,当你点击箭头时,该函数会删除上一页的.active类,并在下一页中添加.class。

箭头控制代码:

<div class="arrowPosition2"> 
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
</div>

我的英语不是很好,你可以看到这个截图: screenshot http://i60.tinypic.com/jrttnq.jpg

非常感谢。

编辑:

 <div class="arrowPosition2"> 
              <a id="arrowPrev" class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a id="arrowNext" class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
 </div>
$(document).ready(function(){
  var $listItems = $('.pagination li');
  var $arrowItems = $('.arrowPosition2 a');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  
    var activeLink=$(this);
  });

     $('#arrowPrev').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
    $activeLi.prev().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });

     $('#arrowNext').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.next()!=null && $activeLi.next()!=undefined ){
    $activeLi.next().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });


});

5 个答案:

答案 0 :(得分:2)

Plz如果条件改变

if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}

enter image description here

答案 1 :(得分:1)

我认为这会对你有所帮助

var activeLink;

$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
  $listItems.removeClass('active');
  $(this).addClass('active');  
  var activeLink=$(this);////  store in variable and do work on pev next btn
  });
});

答案 2 :(得分:1)

$('#Arrow').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
$activeLi.prev()..addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});

答案 3 :(得分:1)

$('#NEXT_ARROW_ID').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next()!=null && $activeLi.next()!=undefined ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}
});

答案 4 :(得分:1)

这是你的:pagination.js

$(document).ready(function(){
  var $listItems = $('.pagination li');
var $arrowItems = $('.arrowPosition2 a');

 $listItems.click(function(){
$listItems.removeClass('active');
$(this).addClass('active');  
var activeLink=$(this);
});

 $('#arrowPrev').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev().length>0 ){
$activeLi.prev().addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});

$('#arrowNext').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next().length>0){
$activeLi.next().addClass('active');  
 }else{
$('.pagination').find("li:first").addClass("active")
}
});


});