Jquery 创建多步骤表单

我使用引导，我试图创建一个包含3个步骤的多步骤表单，但我创建它时没有使用引导，因为我没有找到多步骤表单组件。但现在我们来看看步骤之间的导航部分，例如：

如果我们在步骤1中，单击“转到步骤2”，我想显示步骤2 div。然后在该div中，我们有步骤2 div内容以及按钮“转到步骤3”和按钮“返回步骤1”。在步骤3部分中，我们有步骤3内容和按钮“返回步骤2”和“确定”

我尝试使用引导选项卡来完成这个jquery部分，例如：

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

...
...
...

但我没有成功地为多步骤表单做这件事。您知道是否可以使用上面的示例在步骤div之间进行导航，以及如何进行导航吗？还是需要一种不同的方法

这是我的多步骤表单代码：

---

注意：用户只能与“转到”和“返回”按钮交互，而不能与标题为“步骤1”、“步骤2”和“步骤3”的按钮交互。

下面是一个很好的示例，说明您在寻找什么：

$（文档）.ready（函数（）{
//初始化工具提示
$（'.nav tabs>li a[title]'）。工具提示（）；
//巫师
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
var$target=$（即target）；
if（$target.parent（）.hasClass（'disabled'））{
返回false；
}
});
$（“.next step”）。单击（函数（e）{
var$active=$（'.wizard.nav tabs li.active'）；
$active.next（）.removeClass（'disabled'）；
nextTab（现行）；
});
$（“.prev步骤”）。单击（函数（e）{
var$active=$（'.wizard.nav tabs li.active'）；
prevTab（活动）；
});
});
功能nextTab（elem）{
$（elem）.next（）.find（'a[data toggle=“tab”]”）。单击（）；
}
功能前置选项卡（elem）{
$（elem）.prev（）.find（'a[data toggle=“tab”]”）。单击（）；
}

向导{
保证金：20px自动；
背景：#fff；
}
.向导.导航选项卡{
位置：相对位置；
利润率：40px自动；
页边距底部：0；
边框底色：#E0；
}
.wizard>div.wizard-inner{
位置：相对位置；
}
.连接线{
高度：2倍；
背景：#e0；
位置：绝对位置；
宽度：80%；
保证金：0自动；
左：0；
右：0；
最高：50%；
z指数：1；
}
.wizard.nav tabs>li.active>a、.wizard.nav tabs>li.active>a:hover、.wizard.nav tabs>li.active>a:focus{
颜色：#555555；
游标：默认值；
边界：0；
边框底色：透明；
}
span.round-tab{
宽度：70px；
高度：70像素；
线高：70px；
显示：内联块；
边界半径：100px；
背景：#fff；
边框：2px实心#e0；
z指数：2；
位置：绝对位置；
左：0；
文本对齐：居中；
字体大小：25px；
}
span.round-tab i{
颜色：#555555；
}
.wizard li.active span.round-tab{
背景：#fff；
边框：2px实心#5bc0de；
}
.wizard li.active span.round-tab i{
颜色：#5bc0de；
}
圆形选项卡：悬停{
颜色：#333；
边框：2倍实心#333；
}
.wizard.nav选项卡>li{
宽度：25%；
}
李巫师：以后{
内容：“；
位置：绝对位置；
左：46%；
不透明度：0；
保证金：0自动；
底部：0px；
边框：5px实心透明；
边框底色：#5bc0de；
转换：0.1s易入易出；
}
.li向导。活动：之后{
内容：“；
位置：绝对位置；
左：46%；
不透明度：1；
保证金：0自动；
底部：0px；
边框：10px实心透明；
边框底色：#5bc0de；
}
.wizard.nav选项卡>li a{
宽度：70px；
高度：70像素；
保证金：20px自动；
边界半径：100%；
填充：0；
}
.wizard.nav选项卡>li a:悬停{
背景：透明；
}
.向导.选项卡窗格{
位置：相对位置；
填充顶部：50px；
}
.向导h3{
边际上限：0；
}
@介质（最大宽度：585px）{
.向导{
宽度：90%；
高度：自动！重要；
}
span.round-tab{
字体大小：16px；
宽度：50px；
高度：50px；
线高：50px；
}
.wizard.nav选项卡>li a{
宽度：50px；
高度：50px；
线高：50px；
}
.li向导。活动：之后{
内容：“；
位置：绝对位置；
左：35%；
}
}

第一步
这是第一步


保存并继续

步骤2
这是第二步


先前的
保存并继续

步骤3
这是第三步


先前的
跳过
保存并继续