jquery 步骤展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 步骤展示</title>
    <style>
        .step {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="step1" class="step">步骤 1</div>
    <div id="step2" class="step">步骤 2</div>
    <div id="step3" class="step">步骤 3</div>

    <button id="prev">上一步</button>
    <button id="next">下一步</button>

    <script>
        $(document).ready(function() {
            let currentStep = 1;

            function showStep(step) {
                $('.step').removeClass('active');
                $('#' + step).addClass('active');
            }

            $('#next').click(function() {
                if (currentStep < 3) {
                    currentStep++;
                    showStep('step' + currentStep);
                }
            });

            $('#prev').click(function() {
                if (currentStep > 1) {
                    currentStep--;
                    showStep('step' + currentStep);
                }
            });

            showStep('step1');
        });
    </script>
</body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

$(document).ready(function() {
    // 你的 jQuery 代码
});