Question

如何在一个表单中添加几个Twitter Bootstrap选项卡？

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">
      <form id="personal-data" class="form-horizontal">
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls to be continued here -->
      <p>Howdy, I'm in Section 2.</p>
    </div>            
  </div>
</div>

Answer 1

让一个<form>包裹起来有什么不对？

<form id="personal-data" class="form-horizontal" method="POST" action="#">

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#1" data-toggle="tab">Tab1</a>
    </li>
    <li>
      <a href="#2" data-toggle="tab">Tab2</a>
    </li>            
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="1">      
      ...
    </div>
    <div class="tab-pane" id="2">
      <!-- form controls to be continued here -->
      <p>Howdy, I'm in Section 2.</p>
    </div>            
  </div>
</div>

</form>

您是按标签提交标签还是在最后一个标签上提交一次？

如果一个一个（例如，验证），只需使用$.post即时发送数据（换句话说，进行ajax调用）

Answer 2

我刚刚碰到同样的问题，如果你想在最后一个标签中提交一次，我假设有一个按钮可以移动beetwen标签。默认情况下，单击这些按钮将触发POST请求。要防止这种情况，请在按钮上添加以下行，然后单击功能：

event.preventDefault();

如何在几个Twitter Bootstrap选项卡上只有一个表单？

2 个答案: