來個簡單的js分頁，走你

時間 2019-11-08
原文原文鏈接
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分頁</title>
    <link rel="stylesheet" href="http://www.xuefu.com/byxf/css/reset.css">
    <style>
        .page {
            width: 650px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            margin: 200px auto;
        }

        .page span {
            width: 80px;
            height: 40px;
            border: 1px #ccc solid;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
        }
        .page span.ban {
            cursor: not-allowed;
        }

        .page a {
            width: 40px;
            height: 40px;
            border: 1px #eee solid;
            border-radius: 2px;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            transition: all .4s;
            color: #333;
            cursor: pointer;
        }

        .page a.active,
        .actives {
            background: skyblue;
            color: #fff !important;
            border-color: transparent;
        }

        .page a:hover {
            background: skyblue;
            color: #fff;
            border-color: transparent;
        }
    </style>
</head>

<body>

    <div class="page" id="page">
        <span class="" id="prev">上一頁</span>
        <a class="active">1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
        <a>6</a>
        <a>7</a>
        <a>8</a>
        <span id="next">下一頁</span>
    </div>

    <script>
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var page = document.getElementById('page').getElementsByTagName('a');
        for (var i = 0; i < page.length; i++) {
            page[i].onclick = function () {
                for (var i = 0; i < page.length; i++) {
                    page[i].className = "";
                }
                this.className = "active";
            }
        }

        next.onclick = function () { nextPage(); }
        prev.onclick = function () { prevPage(); }

        function nextPage() {
            for (var i = 0; i < page.length; i++) {
              if (page[i].className === "active") {
                         page[i].className = "";
                         page[i + 1].className = "active";
                         break;
                }
                if (page[page.length - 1].className === "active") {
                    return false;
                }

            }
        }

        function prevPage() {
            for (var i = 0; i < page.length; i++) {
                  if (page[page.length - page.length].className === "active") {
                    return false;
                }
                if (page[i].className === "active") {
                    page[i].className = "";
                    page[i - 1].className = "active";
                    break;
                }
              
            }
        }



    </script>
</body>

</html>

複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。