jquery实现上一页下一页

注:文章转载于肖肖的博客;

简单说一下思路:就是把每个页面都用position:absolute的属性使每个页面都从叠在一起。然后通过$().hide()隐藏和$().show()显示。点击当前页中的下一页,先获取这一页的index索引。然后通过加1,知道下一页的索引,先让所有页面隐藏,再让下一页显示。

总之,获取索引,除了下一页所有页面隐藏,这样思路。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link href="css/bootstrap.min.css" rel="stylesheet"/>

<link href="css/font-awesome.css" rel="stylesheet"/>

<style>

#wizard {overflow:hidden;height:450px;margin:20px auto;width:570px;position:relative;-moz-border-radius:5px;-webkit-border-radius:5px;}

#wizard .items{width:20000px; clear:both; position:absolute;}

#wizard .right{float:right;}

.lists{text-align: center;background:#EB6100;}

#status{height:35px;padding-left:25px !important;display:inline-block;}

#status li{float:left;color:#fff;padding:18px 30px;list-style:none;margin-right:30px;}

#status li.active{font-weight:normal;}

.active{background-color:#D25802;}

.page{padding:20px 30px;width:570px;float:left;position:absolute;}

.page h3{height:42px; font-size:16px; border-bottom:1px dotted #ccc; margin-bottom:20px; padding-bottom:5px}

.page h3 em{font-size:12px; font-weight:500; font-style:normal}

.page p{line-height:24px;}

.page p label{font-size:14px; display:block;}

.page p #pass{padding:0px;}

.btn_nav{height:36px; line-height:36px; margin:20px auto;}

.prev,.next{width:100px; height:45px; line-height:45px; border:1px solid #d3d3d3; cursor:pointer}

</style>

</head>

<body>

<!--这是注册的页面-->

<div );

});

});

</script>

</body>

</html>