javascript - 在选项卡更改时将焦点设置到 Bootstrap TabContent 中的输入

Question

我需要在选择 tabOne 时将焦点设置为“inputOne”输入，在选择 tabTwo 时将焦点设置为“inputTwo”。

<ul class="nav nav-tabs">
     <li class="active"><a href="#tabOne" data-toggle="tab">Tab One</a></li>
     <li class=""><a href="#tabTwo" data-toggle="tab">Tab Two</a></li> 
</ul>

<div id="tabContent" class="tab-content">
     <div class="tab-pane fade" id="tabOne">
           <input type="text" id="inputOne" />
     </div>
     <div class="tab-pane fade" id="tabTwo">
           <input type="text" id="inputTwo" />
     </div>
</div>

Answer 1

看看这个bootply

JS:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = e.target.attributes.href.value;
  $(target +' input').focus();
})

您可以找到文档 here :