jquery通过隐藏显示实现分页

最新推荐文章于 2019-09-18 10:29:36 发布

houdonghui1987

最新推荐文章于 2019-09-18 10:29:36 发布

阅读量303

点赞数

分类专栏： jquery&js 文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/houdonghui1987/article/details/83874405

版权

jquery&js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

houdonghui1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery通过隐藏显示实现分页

[code="java"]var fenzu="fenzu_";var zu = 1;function nextFenzu(){ for(var i=1;i5){//最后一组了。 $("#fenzu_5").show();//直接写死最后一组吧！ zu = 5; alert("提交"); }else{ fenzu = "fenzu_"...
复制链接

扫一扫