引导选项卡可通过按钮在选项卡之间移动

Question

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

Answer 1

Call this common 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.net/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 :)

Answer 2

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.com/javascript/#tabs cause I didn't feel like working with all the button classes.

Answer 3

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

Answer 4

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.com/fGvD5eB3Ms