手机分页css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机分页示例</title>
    <style>
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
        }
        .pagination button.active {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 这里放置分页内容 -->
    </div>
    <div class="pagination">
        <button class="prev">上一页</button>
        <button class="page active">1</button>
        <button class="page">2</button>
        <button class="page">3</button>
        <button class="next">下一页</button>
    </div>

    <script>
        const pages = document.querySelectorAll('.page');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');

        let currentPage = 1;

        pages.forEach(page => {
            page.addEventListener('click', () => {
                currentPage = parseInt(page.textContent);
                updatePagination();
            });
        });

        prevBtn.addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                updatePagination();
            }
        });

        nextBtn.addEventListener('click', () => {
            if (currentPage < pages.length) {
                currentPage++;
                updatePagination();
            }
        });

        function updatePagination() {
            pages.forEach(page => {
                page.classList.remove('active');
            });
            pages[currentPage - 1].classList.add('active');
            // 这里可以添加加载对应页面内容的逻辑
        }
    </script>
</body>
</html>