Javascript 多步骤jquery div不显示数据

我创建了一个多步骤预订系统，当客户在标题上的4个步骤中填写信息时，步骤会显示出来，但问题是我想让用户访问，因此如果用户错误地输入错误信息，他们有权跳出该步骤并更正其信息，有人能帮助我吗从现在开始，当单击该步骤时，会显示该步骤，但问题是活动div没有消失

$（文档）.ready（函数（）{
$（'.booking_step'）。在（'click'，function（）上{
var step=$（this.attr（'data-step'）；
如果（步骤==1）{
$（'.schedule'）.fadeOut（）；
$（'.minfo'）.fadeOut（）；
$（'.select_rm'）.fadeIn（2500）；
}
如果（步骤==2）{
$（'.select_rm'）.fadeOut（）；
$（'.minfo'）.fadeOut（）；
美元("附表").法代因(2500美元);；
}
});
});
$（“.step1”）。在（'单击'，（函数（e）{
$（'.select_rm'）.fadeOut（）；
美元("附表").法代因(2500美元);；
}));
$（“.step2”）。在（'单击'，（函数（e）{
$（'.schedule'）.fadeOut（）；
$（'main_box'）.fadeIn（2500）；
}));
$（“.step3”）。在（'单击'，（函数（e）{
$（'.minfo'）.fadeOut（）；
$（'main_box'）.fadeIn（2500）；
}));
a{
光标：指针；
}
.预订步骤{
光标：指针；
显示：内联块；
填充：0 20px
}

清洁型
计划日期
住址
清洁型表格
下一个
附表日期表格
下一个
地址表
下一个
使用
hide（）
代替
fadeOut（）

fadeOut（）
上有一个动画


对于jQuery，您还可以进行简单的修改：

$（“.step1、.step2、.step3”）。在（'click'，（函数（e））上{
$（'.select_rm'）.hide（）；
美元("附表").法代因(2500美元);；
}));

这样，您就不会重复您的代码。
更改为下面的代码应该可以工作，请尝试。我想这是你错过的

$（'.minfo'）.fadeOut（）更改为
$（'.main_box'）.fadeOut（）


a{
光标：指针；
}
.预订步骤{
光标：指针；
显示：内联块；
填充：0 20px
}
清洁型
计划日期
住址
清洁型表格
下一个
附表日期表格
下一个
地址表
下一个
$（文档）.ready（函数（）{
$（'.booking_step'）。在（'click'，function（）上{
var step=$（this.attr（'data-step'）；
如果（步骤==1）{
$（'.schedule'）.fadeOut（）；
$（'.main_box'）.fadeOut（）；
$（'.select_rm'）.fadeIn（2500）；
}
如果（步骤==2）{
$（'.select_rm'）.fadeOut（）；
$（'.main_box'）.fadeOut（）；
美元("附表").法代因(2500美元);；
}
});
});
$（“.step1”）。在（'单击'，（函数（e）{
$（'.select_rm'）.fadeOut（）；
美元("附表").法代因(2500美元);；
}));
$（“.step2”）。在（'单击'，（函数（e）{
$（'.schedule'）.fadeOut（）；
$（'main_box'）.fadeIn（2500）；
}));
$（“.step3”）。在（'单击'，（函数（e）{
$（'.minfo'）.fadeOut（）；
$（'main_box'）.fadeIn（2500）；
}));
是的，我会的，但你不认为这不是我问的问题吗？如果我在地址上，然后我单击clean type，则clean type div是可见的，但address form没有隐藏，但问题是，所有3个步骤都有不同的类。你不认为它会在我测试时工作，但它不适合我吗一系列插件来做你想做的事情。签出：。示例之后提供了源代码。您的代码中有很多问题需要解决。我认为（在阅读你的问题时）问题在于两个标签之间的重叠（从一个标签切换到另一个标签时）。看起来你在谈论总体结构。
  <style type="text/css">
    a {
  cursor:pointer;
}

.booking_step {
  cursor:pointer;
  display:inline-block;
  padding:0 20px
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="steps">
    <div class="booking_step complete" data-step="1">
      <span class="bh_tittle">Clean Type</span>
    </div>

    <div class="booking_step no_hd dt_schl" data-step="2">
      <span class="bh_tittle">Schedule Date</span>
    </div>

    <div class="booking_step no_hd dt_ad_t" data-step="3">
      <span class="bh_tittle">Address</span>
    </div>
</div>

<div class="booking-flow-section select_rm" data-section="1" style="display: block;">
  <h1>Clean Type Form</h1>
  <a class="step1">Next</a>
</div>

<div class="booking-flow-section schedule" data-section="2" style="display: none;">
  <h1>Schedule Date Form</h1>
  <a class="step2">Next</a>
</div>

<div class="booking-flow-section main_box" data-section="3" style="display: none;">
  <h1>Address Form</h1>
  <a class="step3">Next</a>
</div>                        <script type="text/javascript">
                        $(document).ready(function() {
    $('.booking_step').on('click', function() {
        var step = $(this).attr('data-step');

        if(step == 1) {
            $('.schedule').fadeOut();
            $('.main_box').fadeOut();
            $('.select_rm').fadeIn(2500);
        }

        if(step == 2) {
            $('.select_rm').fadeOut();
            $('.main_box').fadeOut();
            $('.schedule').fadeIn(2500);
        }
    });
});

$(".step1").on('click', (function(e) {
    $('.select_rm').fadeOut();
    $('.schedule').fadeIn(2500);
}));

$(".step2").on('click', (function(e) {
    $('.schedule').fadeOut();
    $('.main_box').fadeIn(2500);
}));

$(".step3").on('click', (function(e) {
    $('.minfo').fadeOut();
    $('.main_box').fadeIn(2500);
}));

                          </script>