Bootstrap向导：如何使用JavaScript跳转到下一步？

Question

Bootstrap向导：如何使用JavaScript跳转到下一步？

javascripttwitter-bootstrapwizard

6

我有一个Bootstrap向导，其中一个步骤显示了一个带有几个按钮的表单。其中一个按钮需要调用ajax操作，并在成功时进入向导的下一步。

从与按钮onclick事件相关联的JavaScript中，我如何告诉向导进入下一步？

- Lying Dog

一个踩票而没有解释的评论？怎么回事？我已经阅读了我能找到的所有文档，搜索了谷歌和stackoverflow，但什么都没找到……我做错了什么？ - Lying Dog

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mosh Feu · Accepted Answer

如果您指的是这个插件，那么您需要像这样调用wizard函数：

wizard.bootstrapWizard('function_name', someValueIfNeeded);

因此，如果要显示下一步，您可以执行以下操作：

wizard.bootstrapWizard('next')

完整的方法列表可以在文档中找到。

var wizard = $('#rootwizard').bootstrapWizard();

$('button').click(function(){
  wizard.bootstrapWizard('next')
});

#page {
  width:600px;
  margin:50px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>

<div id="page">
  <div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane" id="tab1">
        1
      </div>
      <div class="tab-pane" id="tab2">
        2
      </div>
      <div class="tab-pane" id="tab3">
        3
      </div>
      <div class="tab-pane" id="tab4">
        4
      </div>
      <div class="tab-pane" id="tab5">
        5
      </div>
      <div class="tab-pane" id="tab6">
        6
      </div>
      <div class="tab-pane" id="tab7">
        7
      </div>
    </div> 
  </div>
  <button>Next</button>
</div>

http://jsbin.com/mufomov/1