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

【问题标题】：Getting two bootstrap tabs to work on a single page and accessing the active tab on submit让两个引导选项卡在单个页面上工作并在提交时访问活动选项卡
【发布时间】：2016-03-26 02:12:49
【问题描述】：

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

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

简化代码如下..

    <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%" />

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

我在引导站点中找到了此代码.. 但它是针对单个选项卡的..

$('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/

真诚感谢任何帮助

谢谢

【问题讨论】：

你可以使用href="#tabId"?

标签： javascript jquery twitter-bootstrap tabs

【解决方案1】：

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

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

【讨论】：

我在创建简化代码时犯了这个错误..，现在有问题已纠正
那我需要给
添加一个id吗

你可以使用 hasClass(".active").next("a").attr("href")。从这里将有一个特定的选择器，你可以用它做任何事情......虽然你也可以使用 id 并且真的不确定你想用它做什么。一旦你知道哪个选项卡有类活动，你就可以用它做任何事情。

0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法'next'

你想用它实现什么。我实际上没有得到。一旦您知道页面中哪个选项卡处于活动状态，您就可以对该选项卡进行任何操作。像 li hasClass active 。比让 addClass bg-success 成功或任何你喜欢的东西