在提交单击按钮启用下一个选项卡？

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="">
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <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>