我在更改第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")
}
});
});
答案 0 :(得分:2)
Plz如果条件改变
if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');
}else{
$('.pagination').find("li:first").addClass("active")
}
答案 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")
}
});
});