javascript - How to go to the next tab when clicking on an input in HTML? - Stack Overflow

admin管理员组

文章数量:1406951

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

Share Improve this question Follow asked Dec 9, 2014 at 6:27 AmareAmare 71533 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to go to the next tab when clicking on an input in HTMLStack Overflow