jquery分步 下拉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Step Dropdown</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .step { display: none; }
        .step.active { display: block; }
    </style>
</head>
<body>

<div id="step1" class="step active">
    <h1>Step 1</h1>
    <button id="next1">Next</button>
</div>

<div id="step2" class="step">
    <h1>Step 2</h1>
    <button id="prev2">Previous</button>
    <button id="next2">Next</button>
</div>

<div id="step3" class="step">
    <h1>Step 3</h1>
    <button id="prev3">Previous</button>
    <button id="finish">Finish</button>
</div>

<script>
$(document).ready(function() {
    $('#next1').click(function() {
        $('#step1').removeClass('active');
        $('#step2').addClass('active');
    });

    $('#prev2').click(function() {
        $('#step2').removeClass('active');
        $('#step1').addClass('active');
    });

    $('#next2').click(function() {
        $('#step2').removeClass('active');
        $('#step3').addClass('active');
    });

    $('#prev3').click(function() {
        $('#step3').removeClass('active');
        $('#step2').addClass('active');
    });

    $('#finish').click(function() {
        alert('Form submitted!');
    });
});
</script>

</body>
</html>

$(document).on('click', '#next1', function() {
    // 处理点击事件
});