如何获取选定的引导选项卡表单选择器

Question

我似乎在这个问题上苦苦挣扎。我在网上找到的每个例子都不起作用。

我想要做的是访问选定选项卡内的特定表单。但无论我尝试什么，onload 事件都不会运行并且不会选择选定的选项卡。您必须在选项卡之间来回切换才能触发事件。

所以我的问题是，如果设置了活动选项卡，我如何仅在可见或活动选项卡中访问表单元素？

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    <form id="form1">

</form>
  </div>
  <div class="tab-pane fade" id="profile">
    <form id="form2">

</form>
  </div>
</div>
</form>

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});

Answer 1

使用引导打开的选项卡将具有活动类。事实上，有些 js 从之前打开的选项卡中删除了活动类，并将其添加到您刚刚打开的选项卡中。

因此，您可以使用$(".active") 选择它，如果您想要该特定选项卡的表单$(".active").find(".my-form")

$("#myTab").children(".active") 只会选择 myTab 的直接子代，如果你想更具体一些，它给出了活动类