引导选项卡可通过按钮在选项卡之间移动 [英] Bootstrap tabs to move between tabs through buttons Prev/next

问题描述

引导程序选项卡可通过按钮上一个/下一个在选项卡之间移动."

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

我有一个javascript函数，接下来我可以转到一个标签页:

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

我的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函数，通过单击它们各自选项卡中的按钮，我可以通过它们逐个浏览所有选项卡.任何帮助将不胜感激.

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.

推荐答案

在Click事件上的下一个"和上一个"按钮上调用此通用功能

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

实时演示@ http://jsfiddle.net/R3mCY/50/

注意:我已经从html中删除了为下一个和上一个按钮添加的click events回调，而是在Jquery本身中为两个按钮附加了click事件的回调函数

快乐编码:)

这篇关于引导选项卡可通过按钮在选项卡之间移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！