纯css页面切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Page Switch</title>
    <style>
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        .nav {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .nav a {
            margin: 0 10px;
            text-decoration: none;
            color: black;
        }
        .nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="active">Page 1</a>
        <a href="#">Page 2</a>
        <a href="#">Page 3</a>
    </div>
    <div class="page active" id="page1">
        <h1>Page 1</h1>
        <p>This is the first page.</p>
    </div>
    <div class="page" id="page2">
        <h1>Page 2</h1>
        <p>This is the second page.</p>
    </div>
    <div class="page" id="page3">
        <h1>Page 3</h1>
        <p>This is the third page.</p>
    </div>

    <script>
        document.querySelectorAll('.nav a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.remove('active');
                });
                document.querySelectorAll('.nav a').forEach(a => {
                    a.classList.remove('active');
                });
                e.target.classList.add('active');
                document.getElementById(e.target.getAttribute('href').substring(1)).classList.add('active');
            });
        });
    </script>
</body>
</html>