当前位置: 代码迷 >> Web前端 >> jquery经过隐藏显示实现分页
  详细解决方案

jquery经过隐藏显示实现分页

热度:33   发布时间:2012-10-10 13:58:11.0
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>


  相关解决方案