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

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

第一个有两个选项卡，第二个有三个选项卡

简化代码如下所示

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

当有两个引导选项卡组件时，需要进行哪些更改

JSFIDLE（不工作）：

我们衷心感谢您的帮助

---

感谢您获得当前活动的选项卡，您可以在submit button hasClass（“.active”）.attr（“id”）的单击事件中进行检查

---

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

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

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

。这里正在工作。

您可以使用

href=“#tabId”

？我在创建简化代码时犯了这个错误。现在问题已得到纠正。所以我需要向

添加一个id吗？您可以使用hasClass（.active”）.next（“a”）.attr（“href”）。从这将有一个特定的选择器，你可以用它做任何事情。。。虽然你也可以使用id，但真的不确定你想用它做什么。一旦知道哪个选项卡的类处于活动状态，您就可以使用该选项卡执行任何操作。0x800a01b6-JavaScript运行时错误：对象不支持属性或方法“next”，您希望通过它实现什么。事实上，我并没有得到。一旦您知道页面中哪个选项卡处于活动状态，您就可以对该选项卡执行任何操作。像李老师一样，课堂上很活跃。而不是将addClass bg成功添加到它或任何您喜欢的内容

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