"Bootstrap tabs to move between tabs through buttons Prev/next."

I have a javascript function that let me go one tab next:

$(".btn-style").click
(
    function()
    {
        $('.nav-tabs li:eq(1) a').tab('show');

        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        $('.nav-tabs li:eq(1) a').addClass("btn btn-large btn-block btn-success disabled");
    }
);

my html:

                        <ul class="nav nav-tabs" style="width: 1050px">
                                <li><a href="#Race" class="btn btn-large btn-block btn-success disabled" data-toggle="tab">Race</a></li>
                                <li><a href="#Ace" data-toggle="tab">Ace</a></li>
                                <li><a href="#Deep" data-toggle="tab">Deep</a></li>

                        </ul>


                                <div class="tab-content">


                                        <!-- Race -->
                                        <div class="tab-pane active" id="Race">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                         </div>

                                        <!-- ACE -->
                                        <div class="tab-pane active" id="Ace">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                        </div>


                                </div>

I need a javascript or jquery function through which i can go through all my tabs one by one on clicking a button in their respective tabs. Any help would be appreciated thanks.

"Bootstrap tabs to move between tabs through buttons Prev/next."

I have a javascript function that let me go one tab next:

$(".btn-style").click
(
    function()
    {
        $('.nav-tabs li:eq(1) a').tab('show');

        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        $('.nav-tabs li:eq(1) a').addClass("btn btn-large btn-block btn-success disabled");
    }
);

my html:

                        <ul class="nav nav-tabs" style="width: 1050px">
                                <li><a href="#Race" class="btn btn-large btn-block btn-success disabled" data-toggle="tab">Race</a></li>
                                <li><a href="#Ace" data-toggle="tab">Ace</a></li>
                                <li><a href="#Deep" data-toggle="tab">Deep</a></li>

                        </ul>


                                <div class="tab-content">


                                        <!-- Race -->
                                        <div class="tab-pane active" id="Race">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                         </div>

                                        <!-- ACE -->
                                        <div class="tab-pane active" id="Ace">
                                                     <button class="btn-style" type="submit">Prev</button>
                                                     <button class="btn-style" type="submit">Next</button>

                                        </div>


                                </div>

I need a javascript or jquery function through which i can go through all my tabs one by one on clicking a button in their respective tabs. Any help would be appreciated thanks.

• javascript
• jquery
• twitter-bootstrap

• You can add a custom attribute to all your tab items say custom attribute with Name tabIdentifier = "tab" + some enumerator. so you can have a generic javascript method which will be fired on click of the button, that will retrieve the button's wrapping tab i.e. div read this custom attribute and then based on the enumerator you can set the previous or next tab active by subtracting or adding the enumerator by one and selecting the required tab. – Girish Sakhare Commented Jan 23, 2014 at 13:50

4 Answers 4

Call this mon function on Next and previous buttons on Click event

$('#nxt').on('click', function () {
   moveTab("Next");
});
$('#prv').on('click', function () {
   moveTab("Previous");
});


function moveTab(nextOrPrev) {
   alert(nextOrPrev);
   var currentTab = "";
   $('.nav-tabs li').each(function () {
      if ($(this).hasClass('active')) {
        currentTab = $(this);
      }
   });

   if (nextOrPrev == "Next") {
      if (currentTab.next().length) 
      {
         currentTab.removeClass('active');
         currentTab.next().addClass('active');}
      else {} // do nothing for now

    } else {
      if (currentTab.prev().length) 
      {
        currentTab.removeClass('active');
        currentTab.prev().addClass('active');
      }
      else {} //do nothing for now 
    }
  }

LIVE DEMO @ http://jsfiddle/R3mCY/50/

Note:I have removed the click events callback added for next and previous button from the html, instead attached a callback function for click event for both buttons in Jquery itself

Happy Coding :)

I'd tackle it like this:

HTML:

<ul class="nav nav-tabs" style="width: 1050px">
    <li class="active"><a href="#Race" data-toggle="tab">Race</a>
    </li>
    <li><a href="#Ace" data-toggle="tab">Ace</a>
    </li>
    <li><a href="#Deep" data-toggle="tab">Deep</a>
    </li>
</ul>
<div class="tab-content">
    <!-- Race -->
    <div class="tab-pane active" id="Race">
        <button class="btn-style" type="submit">Prev</button>
        <button class="btn-style" type="submit">Next</button>
    </div>
    <!-- ACE -->
    <div class="tab-pane" id="Ace">
        <button class="btn-style" type="submit">Prev</button>
        <button class="btn-style" type="submit">Next</button>
    </div>
</div>

And JS:

$(".btn-style").click(function () {
    var target = $(".nav-tabs li.active");
    var sibbling;
    if ($(this).text() === "Next") {
        sibbling = target.next();
    } else {
        sibbling = target.prev();
    }
    if (sibbling.is("li")) {
        sibbling.children("a").tab("show");
    }
});

I grabbed the normal styling from http://getbootstrap./javascript/#tabs cause I didn't feel like working with all the button classes.

// This is the final solution (Thanks to: gpgekko and dreamweiver)

<!-- Move to other tabs by clicking on the button -->
<script>
$(".a-btn-text").click(function ()
  { 
    var target = $(".nav-tabs li.active");
    var sibbling;

    if ($(this).text() === "Next")
    {
        sibbling = target.next();
    }

    else
    {
        sibbling = target.prev();
    }

    if (sibbling.is("li"))
    {
        sibbling.children("a").tab("show");
        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        sibbling.children("a").addClass("btn btn-large btn-block btn-success disabled");
    }
});
</script>

This is thing you want.

JS

$('.continue').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.back').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

CSS

.tabs-wrap {
    margin-top: 40px;
}
.tab-content .tab-pane {
    padding: 20px 0;
}

Finally HTML

<div class="container tabs-wrap">
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#billing" aria-controls="billing" role="tab" data-toggle="tab" aria-expanded="true">Billing Address</a>
    </li>
    <li>
      <a href="#shipping" aria-controls="shipping" role="tab" data-toggle="tab" aria-expanded="false">Delivery Address</a>
    </li>
    <li>
      <a href="#review" aria-controls="review" role="tab" data-toggle="tab" aria-expanded="false">Review &amp; Payment</a>
    </li>
  </ul>

<div class="tab-content">

  <div role="tabpanel" class="tab-pane active" id="billing">
    <h3 class="">Billing Address</h3>
    <p>Billing Address Form</p>
    <a class="btn btn-primary continue">Continue</a>
  </div>

  <div role="tabpanel" class="tab-pane" id="shipping">
    <h3 class="">Shipping Address</h3>
    <p>Shipping Address Form</p>
    <a class="btn btn-primary back">Go Back</a>
    <a class="btn btn-primary continue">Continue</a>
  </div>

  <div role="tabpanel" class="tab-pane" id="review">
    <h3 class="">Review &amp; Place Order</h3>
    <p>Review &amp; Payment Tab</p>
    <a class="btn btn-primary back">Go Back</a>
    <a class="btn btn-primary continue">Place Order</a>
  </div>
</div></div>


            <div id="push"></div>

From http://www.bootply./fGvD5eB3Ms