Question

我想在选择值时加载第一个标签。如果用户在第二个选项卡中更改了所选值，则应加载第一个选项卡。我怎么能这样做？

<script>
    $('#select1').on('change', function (e) {
        var defaut = '#menu1';
        $('#myTab li a').defaut.tab('show'); 
    });
</script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active">
        <a data-toggle="tab" href="#home">HOME</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu1">MENU</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu2" onclick="loadUser()">USER</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu3">Options</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu4">BILLING</a>
    </li>
</ul>

Answer 1

$('#select1').on('change', function (e) {
  $('#myTab a:first').tab('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quasi eaque, dolores molestiae ullam nemo perspiciatis quidem officia aliquid beatae quod. Dolorum, provident praesentium repellendus enim ipsum nostrum tenetur assumenda.</div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <select name="" id="select1">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
      </select>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum sit, natus et ex aspernatur perferendis, quod obcaecati mollitia temporibus dicta voluptatum nemo. Qui vitae officia doloremque labore, consectetur ipsa, odio!</div>
    <div role="tabpanel" class="tab-pane" id="settings">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, quaerat repellendus perferendis aut natus suscipit at vitae recusandae magnam laudantium quod blanditiis minima velit, esse ratione facilis quasi tempora ducimus!</div>
  </div>

</div>

要跳回第一个标签，请执行以下操作：

 $('#select1').on('change', function (e) {
   $('#myTab a:first').tab('show');
 });

选择onchange HTML / PHP时加载到第一个选项卡

1 个答案: