在 HTML 表单中包含活动的引导选项卡 [关闭]

Question

我有一个使用带有两个选项卡的引导程序构建的 HTML 表单。某些表单字段会根据处于活动状态的选项卡而变化。举个例子：

<form role="form" method="POST" action="#">
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a data-toggle="pill" href="#scheduled">Scheduled</a></li>
  <li role="presentation"><a data-toggle="pill" href="#event">Event</a></li>
</ul>

  <div class="tab-pane active" id="scheduled">
   <input class="form-control" type="text" id="triggerdate" value="10/24/2016" />
  </div>
  <div class="tab-pane active" id="event">
    <input id="event" class="form-control" type="text" placeholder="Event" />
 </div>
</form>

我想要一种将活动选项卡作为输入包含在表单中的方法。

Answer 1

使用 Bootstrap 的回调事件来更新隐藏的输入：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  // e.target // newly activated tab
  // e.relatedTarget // previous active tab
  $('input.whatever').val(e.target.id); // id property not tested, but you get the idea
});

http://getbootstrap.com/javascript/#tabs-events

是的，请务必提供您下次尝试的进度。