标签：wizard twitter-bootstrap javascript

我有一个引导向导,其中的一个步骤显示了带有多个按钮的表单.这些按钮之一需要调用ajax操作,如果成功,请继续执行向导中的下一步.

从与按钮的onclick-Event绑定的JavaScript中,如何告诉向导进行下一步？

解决方法:

如果您是指this插件,则可以这样调用向导函数：

wizard.bootstrapWizard(‘function_name’,someValueIfNeeded);

因此,为了显示下一步,您可以执行以下操作：

wizard.bootstrapWizard(‘下一个’)

您可以在docs中找到完整的方法列表

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

标签：wizard,twitter-bootstrap,javascript
来源： https://codeday.me/bug/20191121/2049711.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。