Question

我的页面上有两个引导标签组件

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

简化代码如下..

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

当有两个引导标签组件时，需要进行哪些更改。

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

真心感谢任何帮助

由于

Answer 1

要获取当前活动的标签，您可以在提交按钮hasClass（“。active”）。attr（“id”）的点击事件中查看。

第二个标签容器ID与第一个标签容器标识相同。

Answer 2

如果我理解正确，您需要知道哪些标签在两个组件中都处于活动状态时提交＆＃34;提交＆＃34;按钮是正确的。要获得它，您可以在按钮的点击处理程序中使用以下代码：

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包含相应标签组件中所选/有效标签的id。这是工作 fiddle 。

获取两个引导选项卡以在单个页面上工作并在提交时访问活动选项卡

2 个答案: