[英]Set focus to an input within a Bootstrap TabContent on tab change
I need to set focus to "inputOne" input when tabOne is selected, and set focus to "inputTwo" when tabTwo is selected. 我需要在选择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>
You can rely on the bootstrap "shown" event for the tabs to handle this: 您可以依赖于标签的bootstrap“显示”事件来处理:
$(".nav-tabs a").on("shown.bs.tab", function(event) {
$(event.target.href.value + " input").focus();
});
more info on the tab event: http://getbootstrap.com/javascript/#tabs 有关选项卡事件的更多信息: http : //getbootstrap.com/javascript/#tabs
You can write the following jquery code : 您可以编写以下jquery代码:
$( "#tabOne" ).click(function() {
$( "#inputOne" ).focusin()
});
Do the same thing for tabTwo
also. 也为tabTwo
做同样的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.