javascript - 单击 HTML 中的输入时如何转到下一个选项卡？

Question

当仅单击第一个选项卡(id 为“home”)中的输入(id 为“sbmt”)时，我想转到下一个选项卡(id 为“profile”)。

这是我的 HTML 代码。

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">
  <br/>

    <div class="form-group">
        <input id ="sbmt" type="submit" name="submit" class="btn btn-success" id="submit" value="Proceed" style="margin-left: 62px; margin-top: -15px; width: 10%; background-color: #20ca53; border: #20ca53;"/>
    </div>
  </div>

  <div class="tab-pane" id="profile">
   <br/>
   Profile Content
  </div>

  <div class="tab-pane" id="messages">
   <br/>
    Messages Content
  </div>

</div>

这是我的 JavaScript 代码。

 $(function(){
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');

    $('.nav-tabs a').click(function (e) {
         $(this).tab('show');
         var scrollmem = $('body').scrollTop();
         window.location.hash = this.hash;
         $('html,body').scrollTop(scrollmem);
    });
 });

Answer 1

找到下一个选项卡的索引并显示它:

$('#sbmt').on('click', function (e) {
    e.preventDefault();
    var $li = $('.nav-tabs').find('li'),
        i = $li.siblings('.active').index(),
        max = $li.length;

    if (i < max) {
      $li.find('[role="tab"]').eq(i+1).tab('show');
    }
});

JSFiddle 演示:http://jsfiddle.net/kbjwymbq/1/