2015-05-29 55 views
0

我想在選擇值時加載第一個選項卡。如果用戶在第二個選項卡內時更改選定值,則應加載第一個選項卡。我怎樣才能做到這一點?選擇onchange時加載到第一個選項卡HTML/PHP

<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> 

回答

0

$('#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'); 
}); 
+0

我嘗試過,但它不工作,而不是在控制檯上顯示錯誤(jQuery的不承認) – TheJoker

+0

任何方式只用JavaScript? (沒有jquery) – TheJoker

+0

我做了一個編輯。如果它不適合你,你的腳本的其他部分肯定會出現問題。查看代碼片段,工作得很好。 – DavidDomain

相關問題