引導選項卡可通過按鈕在選項卡之間移動

Question

“引導選項卡可通過上一頁/下一頁按鈕在選項卡之間移動。”

我有一個javascript函數，接下來我可以轉到一個標簽頁：

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

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

我需要一個javascript或jquery函數，通過單擊它們各自選項卡中的按鈕，我可以通過它們逐個瀏覽所有選項卡。 任何幫助，將不勝感激謝謝。

Answer 1

在Click事件的Next和Previous按鈕上調用此通用功能

$('#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 
    }
  }

實時演示@ http://jsfiddle.net/R3mCY/50/

注意：我已經從html中刪除了為下一個和上一個按鈕添加的單擊事件回調，而是在Jquery本身中為兩個按鈕的click事件附加了回調函數

快樂編碼:)

Answer 2

我會這樣解決：

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>

和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");
    }
});

我從http://getbootstrap.com/javascript/#tabs獲取了常規樣式，因為我不想使用所有按鈕類。

Answer 3

//這是最終的解決方案（感謝：gpgekko和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

這就是你想要的東西。

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

最后是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>

從http://www.bootply.com/fGvD5eB3Ms