如何在bootstrap中禁用步骤导航？

Question

以下是bootstrap步骤导航的图片，

现在我在页面底部有一个“下一个”按钮（在此图片中不可见），按下“下一步”按钮，我从“第一步基本信息”转到“第二步餐厅类别” 。但问题是，当我从导航中点击“2”或“3”时，我可以进入受尊重的步骤。我想禁用此功能，因为我只希望用户按“下一步”按钮从一步到另一步。任何人都可以帮我解决如何从导航栏禁用导航？ 提前谢谢。

Answer 1

刚拿到解决方案，

在文件中包含以下脚本

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

您可以删除提醒（）。

Answer 2

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

<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>