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：

Answer 2

你可以依靠引导＆＃34;显示＆＃34;标签处理此事件的事件：

$(".nav-tabs a").on("shown.bs.tab", function(event) {
    $(event.target.href.value + " input").focus();
});

有关标签事件的更多信息：http://getbootstrap.com/javascript/#tabs

Answer 3

您可以编写以下jquery代码：

$( "#tabOne" ).click(function() {
  $( "#inputOne" ).focusin()        
});

对tabTwo也做同样的事情。

将焦点设置为选项卡更改时Bootstrap TabContent中的输入

3 个答案: