RT,不是很难,但是感觉代码一点都不简洁,就是多加点判断,直接上代码了。
HTML部分:
1 <div class = "container-fluid"> 2 <div class = "row"> 3 <div class = "col-xs-12 line" style="text-align:center"> 4 <nav> 5 <ul id = "page" class="pagination" style="margin-top:3px;"> 6 7 </ul> 8 </nav> 9 </div> 10 </div> 11 </div>
JS部分:
1 $("#page").on('click','.list',function(){ 2 $(this).addClass("active"); 3 $(this).siblings().removeClass("active"); 4 getStatus(); 5 if(isMore) 6 { 7 switch($(this).attr("id")) 8 { 9 case "firstOne": 10 $(this).next().show(); 11 $(this).next().next().show(); 12 $(this).next().next().nextAll('.list').hide(); 13 $("#disabledNext").show(); 14 $("#disabledPerv").hide(); 15 break; 16 case "lastOne": 17 $(this).prev().show(); 18 $(this).prev().prev().show(); 19 $(this).prev().prev().prevAll('.list').hide(); 20 $("#disabledPerv").show(); 21 $("#disabledNext").hide(); 22 break; 23 default: 24 $(this).prev().prevAll('.list').hide(); 25 $(this).next().nextAll('.list').hide(); 26 $(this).prev().show(); 27 $(this).next().show(); 28 if($("#page .list:first").is(':visible')) 29 { 30 $("#disabledNext").show(); 31 $("#disabledPerv").hide(); 32 } 33 if($("#page .list:last").is(':visible')) 34 { 35 $("#disabledPerv").show(); 36 $("#disabledNext").hide(); 37 } 38 break; 39 } 40 } 41 }); 42 //最后一页的效果 43 $("#page").on('click','#last',function(){ 44 $("#page .list:last").show().click(); 45 }); 46 //第一页的点击效果 47 $("#page").on('click','#first',function(){ 48 $("#page .list:first").show().click(); 49 });