Next tab when clicking the button

Question

Next tab when clicking the button

Navigation

#1 by (7 votes)
#2 by (3 votes)

3

I have a registration form divided into tabs, where the tabs are disabled until the user clicks the button to enable and go to next. The problem is that the way the user is has to enable the button and then click on the next tab. I need when the user clicks the NEXT button it will be directed to the next tab automatically, and add a button to return to the previous tab.

My code is currently so: JSFiddle

HTML:

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

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
          Nome: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="profile">
          CPF: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="messages">

          <button>Salvar</button>
      </div>
    </div>

JS:

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    });
});

I need something like this: Example

javascript html jquery bootstrap-3

asked by anonymous 24.02.2015 / 13:18

2 answers

3

Of course Oeslei's answer is better, but here's a manual way to do it:

jsFiddle

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button.next').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').next('li');

        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();

        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
    $('button.previous').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').prev('li');

        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();

        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
});

24.02.2015 / 13:40

Solr, Lucene and ElasticSearch what are the differences? When to use one or the other? I need different ways to rearrange characters within a string, how do I do this?

score 7 · Accepted Answer

The simplest way I see is to trigger the click event on the tab. Just add trigger("click") to the line that enables it:

$('button').click(function(){
    /*enable next tab*/
    $('.nav li.active').next('li').removeClass('disabled');
    $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
});

To set a back button is very simple. You can add the button directly in the html. I recommend that you start using classes or even ids to identify your buttons.

Here is a complete example:

HTML

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

<div id='content' class="tab-content">
    <div class="tab-pane active" id="home">
        Nome: <input/><br/>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="profile">
        CPF: <input/><br/>
        <button class="prev">Anterior</button>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="messages">
        <button class="prev">Anterior</button>
        <button class="save">Salvar</button>
    </div>
</div>

JS

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button.next').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
    });

    $('button.prev').click(function() {
        $('.nav li.active').prev('li').find('a').trigger("click");
    });
});