上提交點擊按鈕啓用下一個標籤？

Question

我們有三個標籤最初的第一個標籤應該啓用我的工作正常。點擊提交按鈕後，第二個選項卡應該打開，但它不起作用。

$("#myTabs form").on('submit',function(e) { 
    e.preventDefault(); 
    var linkHref=$(this).parents('.tab-pane').attr('id'); 
    $('#myLinks li') 
     .find('a[href="#'+linkHref+'"]') 
     .parent() 
     .next() 
     .find('a').tab('show') 
     .attr('data-toggle','tab'); 
}); 

演示鏈接：DEMO

Answer 1

這不是最好的，但給你一些想法：

function go(tab,content, cityName) { 
 
    // Show the current tab, and add an "active" class to the button that opened the tab 
 
    $('.tabcontent.active').removeClass('active'); 
 
    $('.tablinks.active').removeClass('active'); 
 
    tab.addClass('active'); 
 
    content.addClass('active'); 
 
} 
 

 
$(function(){ 
 
    $('#form').on('submit',function(e){ 
 
    e.preventDefault(); 
 
    go($('#tab-2'),$('.tablinks:contains("Tab2")'),'tab-2'); 
 
    }); 
 
});

/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
} 
 

 
div.tabcontent.active { 
 
    display:block; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
    <button class="tablinks active">Tab1</button> 
 
    <button class="tablinks">Tab2</button> 
 
    <button class="tablinks">Tab3</button> 
 
</div> 
 

 
<div id="tab-1" class="tabcontent active"> 
 
    <form id="form" action=""> 
 
\t \t  <div class="form-group"> 
 
\t \t  <label for="email">Email:</label> 
 
\t \t  <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
\t \t  </div> 
 
\t \t  <div class="form-group"> 
 
\t \t  <label for="pwd">Password:</label> 
 
\t \t  <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
 
\t \t  </div> 
 
\t \t  <div class="checkbox"> 
 
\t \t  <label><input type="checkbox"> Remember me</label> 
 
\t \t  </div> 
 
\t \t  <button type="submit" class="btn btn-default" action ="">Submit</button> 
 
    </form> 
 
</div> 
 

 
<div id="tab-2" class="tabcontent"> 
 
    <h3>Tab2</h3> 
 
    <p>...</p> 
 
</div> 
 

 
<div id="tab-3" class="tabcontent"> 
 
    <h3>Tab3</h3> 
 
    <p>...</p> 
 
</div>