I want to go to the next tab (id is "profile") when only clicking on the input (id is "sbmt") in the first tab (id is "home").

Here is my HTML code.

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

Here is my javaScript code.

 $(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);
    });
 });

I want to go to the next tab (id is "profile") when only clicking on the input (id is "sbmt") in the first tab (id is "home").

Here is my HTML code.

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

Here is my javaScript code.

 $(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);
    });
 });

• javascript
• jquery
• html

2 Answers 2

Find the index of the next tab and show it:

$('#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 demo: http://jsfiddle/kbjwymbq/1/

I've made you an easy and independent tab which you can implement easily...

Here's the fiddle : http://jsfiddle/zh6cwLco/

HTML:

<ul class="nav">
    <li><a class="nav_tab active" rel="home" href="javascript:;">Home</a></li>
    <li><a class="nav_tab " rel="profile" href="javascript:;">Profile</a></li>
    <li><a class="nav_tab " rel="messages" href="javascript:;">Messages</a></li>
</ul>
<div class="tab_content_wrapper">
    <div class="tab_content home">
        <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_content profile">  
        Profile Content
    </div>
    <div class="tab_content messages">   
        Messages Content
    </div>
</div>

jQuery

$(document).ready(function(){
     $('.nav .nav_tab').click(function(){
         var tab = $(this).attr('rel');         
         $('.tab_content_wrapper .'+tab).show().siblings().hide();
     });
     $('.tab_content #sbmt').click(function(){
         $(this).closest('.tab_content').next().show().siblings().hide();         
     });
 });