<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
.quqiu
{
background-color: Yellow;
text-decoration: none;
}
.haoba
{
background-color:ButtonFace;
text-shadow: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
pageNum(); //开始加载
pageClick(0);
});
function pageNum() {//生成分页
var alength = $("div[class=pageNumStyle]").length;
var str = "";
for (var i = 0; i < alength; i++) {
str += "<div style=' display:inline;'>第<a href='javascript:pageClick(" + i + ")' >" + (i + 1) + "</a>页</div>";
}
$(".zgw").append(str); //生成第一二三。。。。页
}
function pageClick(pageNum) {//点击隐藏
$(".zgw a").each(function(i) {//控制选项卡的样式
if (i == pageNum) {
$(this).removeClass("haoba"); //先移除
$(this).addClass("quqiu");
} else {
$(this).removeClass("quqiu"); //先移除
$(this).addClass("haoba");
}
});
$("div[class=pageNumStyle]").each(function(i) {//控制内容域的显隐
if (i == pageNum) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
<div>
<div class="zgw">
</div>
<div class="pageNumStyle">
<a>第一页</a><br />
春节了<br />
春节了<br />
春节了<br /> 春节了
</div>
<div class="pageNumStyle">
<a>第二页</a><br />
真的春节了吗
</div>
<div class="pageNumStyle">
<a>第三页</a><br />
好像是真的 <br />好像是真的
</div>
<div class="pageNumStyle">
<a>第四页</a><br />
确定是真的吗<br /> 确定吗<br /> 确定吗
</div>
<div class="pageNumStyle">
<a>第五页</a><br />
确定<br />确定<br />确定
</div>
</div>
</div>
</form>
</body>
</html>