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里面的内容全都能自动分页显示下一页，求代码，求各位大拿拔手相助，在此谢过！展开

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

匿名用户
推荐于2016-03-18

展开全部

<!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 += "&nbsp;";
                }
                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>&nbsp;<a href="#">2</a>&nbsp;<a href="#">3</a>
        </div>
        <input type="text" value="4" id="t1" />&nbsp;
        <input type="button" value="set" onclick="Page.doAction();" />&nbsp;&nbsp;Each Page
        <a id="p1"></a>Records</div>
</BODY>

</HTML>

追问

感谢你的回答，不过我不知道如何改造这javasript代码来得到我想要的效果，使个div1，div2，div3，div4，div5，每一个都能够实现自动分页，烦请大侠详解

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

HTML中如何使网页在下面的每一个div中自动分页显示上一页下一页

其他类似问题

为你推荐：