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

Question

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

我正在尝试做的是访问所选选项卡中的特定表单。但是无论我尝试什么，加载事件都不会运行，也不会选择选定的选项卡。您必须在选项卡之间来回切换才能触发事件。

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

<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从上一个打开的选项卡中删除了活动的classe，并将其添加到您刚刚打开的选项卡中。

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

如果您想更具体，$("#myTab").children(".active")只会选择myTab的直接子级，该子级提供了活动类