单击另一个选项卡中触发输入聚焦的按钮时动态更改选项卡活动

Question

我有这样的标签窗格

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <div class="form-group">
    <label class="control-label col-sm-2" for="n_pimpinan">TEXT :</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="n_pimpinan" name="n_pimpinan" placeholder="text">
        <button type="text" class="btn btn-default" id="button" name="button" >Click ME</button>
    </div>
    </div>
</div>
<div id="menu1" class="tab-pane fade">
   <div class="form-group">
    <label class="control-label col-sm-2" for="n_pimpinan">TEXT 2:</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="n_pimpinan2" name="n_pimpinan2" placeholder="text">
        <button type="text" class="btn btn-default" id="button" name="button2" >Click ME 2</button>
    </div>
</div>

如果我点击按钮[name="button"]，它会引导我到 Tab Menu 1 并聚焦在 input[name="n_pimpinan2"]使用jQuery？因此该选项卡会将活动选项卡从 Home 选项卡更改为 Menu 1 选项卡，而无需单击 javascript 属性选项卡窗格。

我做了一些这样的 javascript

$('#button').click(function(){
    $('input[name="n_pimpinan2"]').focusin();
});

但它不会将我引导到另一个选项卡（Menu 1）

非常感谢

Answer 1

您可以使用.tab('show') 和 jquery .focus() 方法来实现您的目标，如下所示。

$('#button').click(function(e){
    e.preventDefault();
    $('.nav-tabs a[href="#menu1"]').tab('show');
    $('input[name="n_pimpinan2"]').focus();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li style="margin-left:20px"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <div class="form-group">
    <label class="control-label col-sm-2" for="n_pimpinan">TEXT :</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="n_pimpinan" name="n_pimpinan" placeholder="text">
        <button type="text" class="btn btn-default" id="button" name="button" >Click ME</button>
    </div>
    </div>
</div>
<div id="menu1" class="tab-pane fade">
   <div class="form-group">
    <label class="control-label col-sm-2" for="n_pimpinan">TEXT 2:</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="n_pimpinan2" name="n_pimpinan2" placeholder="text">
        <button type="text" class="btn btn-default" id="button" name="button2" >Click ME 2</button>
    </div>
</div>