Javascript 如何在引导中禁用步骤导航？

下面是引导步骤导航的图像

现在我在页面底部有一个“下一步”按钮（图中不可见），按下“下一步”按钮，我将从“第一步基本信息”转到“第二步餐厅类别”。但问题是，当我在导航中单击“2”或“3”时，我可能会转到相关步骤。我想禁用此功能，因为我只希望用户按“下一步”按钮从一个步骤转到另一个步骤。有人能帮我做些什么来禁用导航栏中的导航吗？ 提前谢谢。

刚刚得到解决方案

在文件中包括以下脚本

  <script>
        $(document).ready(function() {
                  $('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) {
                        alert('on tab click disabled');
                        return false;
                }});        
</script>

$（文档）.ready（函数（）{
$（#rootwizard'）。bootstrapWizard（{onTabClick:function（选项卡、导航、索引）{
警报（“在选项卡上单击已禁用”）；
返回false；
}});        

---

您可以删除警报（）。

创建步骤导航时，您可以禁用此部分：

<li class="disabled">
   <a href="#">
      <span class="circle">5</i></span><br>
      <span class="label">Restaurant Categories</span>
   </a>
</li>

因此，整个步骤导航将如下所示：

<div class="row">
 <div class="col-md-12">
  <ul class="stepper stepper-horizontal">
    <li class="completed">
      <a href="#">
        <span class="circle">1</span><br>
        <span class="label">Basic information</span>
      </a>
    </li>
    <li class="active">
      <a href="#">
        <span class="circle">2</span><br>
        <span class="label">Restaurant Categories</span>
      </a>
    </li>
    <li class="disabled">
      <a href="#">
        <span class="circle">3</i></span><br>
        <span class="label">Restaurant Timings</span>
      </a>
    </li>
  </ul>
 </div>
</div>