读书人

jquery经过隐藏显示实现分页

发布时间: 2012-10-10 13:58:11 作者: rapoo

jquery通过隐藏显示实现分页

var fenzu="fenzu_";var zu = 1;function nextFenzu(){   for(var i=1;i<=10;i++){    $("#fenzu_"+i).hide();   }   zu++;   if(zu>5){//最后一组了。    $("#fenzu_5").show();//直接写死最后一组吧!    zu = 5;    alert("提交");   }else{    fenzu = "fenzu_"+zu;    $("#"+fenzu).show();    }   return false;}function upFenzu(){   for(var i=1;i<=10;i++){    $("#fenzu_"+i).hide();   }   zu--;   if(zu<1){    $("#fenzu_1").show();    zu=1;    alert("已经是第一组了!");   }else{    fenzu = "fenzu_"+zu;    $("#"+fenzu).show();     }   return false;}function init(){for(var i=2;i<=10;i++){     $("#fenzu_"+i).hide();}return false;}//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////<BODY onload="init();"><div id="fenzu_1" >1组条数据</div><div id="fenzu_2" >2组条数据</div><div id="fenzu_3" >3组条数据</div><div id="fenzu_4" >4组条数据</div><div id="fenzu_5" >5组条数据</div><span onclick="upFenzu();">上一组</span><span onclick="nextFenzu();">下一组</span></BODY>


读书人网 >Web前端

热点推荐