Question

“Bootstrap选项卡可以通过按钮Prev / next在标签之间移动。”

我有一个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事件

上的下一个和上一个按钮上调用此常用功能

$('#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本身的两个按钮附加了一个回调函数

快乐编码：）

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

Bootstrap选项卡通过按钮Prev / next在选项卡之间移动

4 个答案: