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 =＆＃34;按钮＆＃34;]，我将如何制作，它会指向Tab 菜单1 并聚焦输入[name =＆＃34 ; n_pimpinan2＆＃34;] 使用jquery？因此，该标签会将有效标签从主页标签更改为菜单1 标签，而不使用点击的javascript属性标签窗格。

我已经制作了一些这样的javascript

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

但它并没有指向另一个标签（菜单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>

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

1 个答案: