SOURCE

// 事件_文档加载完成时
$(document).ready(function(){

    // 按钮被点击
    $(document).on('click', '.next', function(){
        var nextClass = $(this).data('target');
        console.log('data-target: ' + nextClass);

        // 全部隐藏
        $('.step-content > div').removeClass('active');

        // 指定下一个需要显示的div
        $(nextClass).addClass('active');

    });
});

<div class="step-content">
    <div class="step1 active">
        <h1>第一步: 输入信息</h1>

        <button type="button" class="next" data-target=".step2">下一步</button>
    </div>

    <div class="step2">
        <h1>第二步: 验证信息</h1>

        <button type="button" class="next" data-target=".step3">下一步</button>
    </div>

    <div class="step3">
        <h1>第三步: 重置密码</h1>

        <button type="button" class="next" data-target=".step4">下一步</button>
    </div>

    <div class="step4">
        <h1>修改密码成功 O(∩_∩)O</h1>

    </div>

</div>

.step-content > div {
    display: none;
}
.step-content > div.active {
    background: #fff;
    display: block;
}