让两个 bootstrap 选项卡在单个页面上工作并在提交时访问活动选项卡

Question

我的页面上有两个 bootstrap 选项卡组件

第一个有两个标签，第二个有三个。

简化代码如下..

    <div class="col-md-12">

  <ul id="tab1" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#taba" role="tab" data-toggle="tab">Tab A</a></li>
    <li role="presentation"><a href="#tabb" role="tab" data-toggle="tab">Tab B</a></li>
  </ul>

  <div id="tab1content" class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="taba">
 Tab A
    </div>
    <div role="tabpanel" class="tab-pane" id="tabb">
Tab B
    </div>
  </div>

</div>

<div class="col-md-12">

  <ul id="tab2" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tabx" role="tab" data-toggle="tab">Tab X</a></li>
    <li role="presentation"><a href="#taby" role="tab" data-toggle="tab">Tab Y</a></li>
    <li role="presentation"><a href="#tabz" role="tab" data-toggle="tab">Tab Z</a></li>
  </ul>

  <div id="tab2content" class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tabx">
 Tab X
    </div>
    <div role="tabpanel" class="tab-pane" id="taby">
Tab Y
    </div>
    <div role="tabpanel" class="tab-pane" id="tabz">
Tab Z
    </div>
  </div>

</div>
<input type="submit" value="Submit" class="btnspl" style="max-width:100%" />

按下提交按钮时，我需要找出页面的两个组件中的活动选项卡。

我在 bootstrap 网站上找到了这段代码..但它适用于单个选项卡..

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

当有两个 bootstrap 选项卡组件时需要进行哪些更改。

jsfiddle（不工作）：http://jsfiddle.net/52VtD/13447/

真诚感谢任何帮助

谢谢

Answer 1

要获取当前活动的选项卡，您可以在提交按钮的点击事件中检查 hasClass(".active").attr("id").

第二个选项卡容器 ID 与第一个选项卡容器 ID 相同。

Answer 2

如果我理解正确，您需要知道当 "submit" 按钮正确时，哪个选项卡在两个组件中处于活动状态。要获得它，您可以在按钮的点击处理程序中使用以下代码：

var x=$("#tab1content  div.active").prop("id");
var y=$("#tab2content  div.active").prop("id");
$("#log").text("TAB 1: "+ x +"\r\nTAB 2: "+ y);

x 和 y 在各自的选项卡组件中包含 selected/active 选项卡的 id。这里正在工作 fiddle.

让两个 bootstrap 选项卡在单个页面上工作并在提交时访问活动选项卡

Getting two bootstrap tabs to work on a single page and accessing the active tab on submit

javascript

jquery

tabs

twitter-bootstrap