HTML中如何使网页在下面的每一个div中自动分页显示上一页下一页
代码如下：<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><tit...
代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript"> function funcShow(id){ for(var i=0;i<5;i++){ var divInfo =document.getElementById('div'+(i+1)); divInfo.style.display='none'; } var div =document.getElementById('div'+id); div.style.display='block'; }</script></head><body><table width="632" border="1"> <tr> <td width="66"><a href="javascript:funcShow(1)">1 </a></td> <td width="550" colspan="4" rowspan="5"><div id="div1" style="display:block">此处显示id "div1" 的内容</div> <div id="div2" style="display:none">此处显示id "div2" 的内容</div> <div id="div3" style="display:none">此处显示id "div3" 的内容</div> <div id="div4" style="display:none">此处显示id "div4" 的内容</div> <div id="div5" style="display:none">此处显示id "div5" 的内容</div></td> </tr> <tr> <td><a href="javascript:funcShow(2)">2 </a></td> </tr> <tr> <td><a href="javascript:funcShow(3)">3 </a></td> </tr> <tr> <td><a href="javascript:funcShow(4)">4 </a></td> </tr> <tr> <td><a href="javascript:funcShow(5)">5 </a></td> </tr></table></body></html>
也就是如何让div1，div2,div3,div4,div5里面的内容全都能自动分页显示下一页，求代码，求各位大拿拔手相助，在此谢过！ 展开
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript"> function funcShow(id){ for(var i=0;i<5;i++){ var divInfo =document.getElementById('div'+(i+1)); divInfo.style.display='none'; } var div =document.getElementById('div'+id); div.style.display='block'; }</script></head><body><table width="632" border="1"> <tr> <td width="66"><a href="javascript:funcShow(1)">1 </a></td> <td width="550" colspan="4" rowspan="5"><div id="div1" style="display:block">此处显示id "div1" 的内容</div> <div id="div2" style="display:none">此处显示id "div2" 的内容</div> <div id="div3" style="display:none">此处显示id "div3" 的内容</div> <div id="div4" style="display:none">此处显示id "div4" 的内容</div> <div id="div5" style="display:none">此处显示id "div5" 的内容</div></td> </tr> <tr> <td><a href="javascript:funcShow(2)">2 </a></td> </tr> <tr> <td><a href="javascript:funcShow(3)">3 </a></td> </tr> <tr> <td><a href="javascript:funcShow(4)">4 </a></td> </tr> <tr> <td><a href="javascript:funcShow(5)">5 </a></td> </tr></table></body></html>
也就是如何让div1，div2,div3,div4,div5里面的内容全都能自动分页显示下一页，求代码，求各位大拿拔手相助，在此谢过！ 展开
1个回答
展开全部
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#content {
margin: auto;
width: 400px;
border: 1px solid black;
}
.on {
color: red
}
.off {
color: black
}
body {
font-family: "Courier New"
}
ul {
padding: 10px 0px 10px 45px;
}
ul li {
color: red
}
</style>
<script type="text/javascript">
window.onload = function() {
Page.arr = Page.pushArr();
Page.setClickPageNum();
Page.allContent("null");
}
var Page = {
defaultPerPageNum: 4,
arr: null,
removedBlankStr: function(str) {
var regex = /^\s*|\s*$/g;
return str.replace(regex, "");
},
setTotalPageNums: function() {
var pp = Number(Page.perPageNum('t1'));
var pnums = Page.arr.length / pp > parseInt(Page.arr.length / pp) ? parseInt(Page.arr.length / pp) + 1 : Page.arr.length / pp;
var div = document.getElementById('pagenum');
div.innerHTML = "";
for (var i = 0; i < pnums; i++) {
var a = document.createElement('a');
a.href = "#";
a.innerHTML = i + 1;
a.setAttribute('class', 'off');
div.appendChild(a);
div.innerHTML += " ";
}
Page.setClickPageNum();
},
perPageNum: function(PerPageNum) {
var pv = document.getElementById(PerPageNum).value;
pv = Page.removedBlankStr(pv);
if ("" == pv || isNaN(pv) || (new RegExp(/^[-]*[0]+.*?$/g).test(pv)) || pv < 0) {
pv = Page.defaultPerPageNum;
document.getElementById(PerPageNum).value = pv;
}
document.getElementById('p1').innerHTML = pv;
return pv;
},
getClickPageNum: function(diva) {
return parseFloat(diva.innerHTML);
},
setClickPageNum: function() {
var divx = document.getElementById('pagenum');
var a = divx.children;
var len = a.length;
for (var i = 0; i < len; i++) {
a[i].onclick = function() {
this.className = "on";
Page.allContent(this);
};
}
},
pushArr: function() {
var arr = new Array();
var ul = document.getElementById('ul1');
var len = ul.children.length;
for (var i = 0; i < len; i++) {
arr.push(ul.children[i]);
}
return arr;
},
allContent: function(divb) {
var ul = document.getElementById('ul1');
ul.innerHTML = "";
var pp = parseFloat(this.perPageNum('t1'));
if ("null" == divb) {
divb = document.getElementById('pagenum').children[0];
divb.className = "on";
}
var pg = this.getClickPageNum(divb); // 1 2 3
var ppj = pp * (pg - 1); // 0 4 8
var end = ppj + pp; // 4 8 12
var arr = this.arr;
var pnums = arr.length / pp > parseInt(arr.length / pp) ? parseInt(arr.length / pp) + 1 : arr.length / pp;
for (var i = ppj; i < end; i++) {
var a = arr[i];
if (null != a) {
ul.appendChild(a);
}
}
},
doAction: function() {
Page.perPageNum('t1');
Page.setTotalPageNums();
Page.allContent("null");
}
};
</script>
</HEAD>
<BODY>
<div id='content'>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div id="pagenum"><a href="#" class="on">1</a> <a href="#">2</a> <a href="#">3</a>
</div>
<input type="text" value="4" id="t1" />
<input type="button" value="set" onclick="Page.doAction();" /> Each Page
<a id="p1"></a>Records</div>
</BODY>
</HTML>
追问
感谢你的回答，不过我不知道如何改造这javasript代码来得到我想要的效果，使个div1，div2，div3，div4，div5，每一个都能够实现自动分页，烦请大侠详解
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
