Fatal编程技术网
  • javascript/
  • Javascript 引导选项卡通过按钮Prev/next在选项卡之间移动

Javascript 引导选项卡通过按钮Prev/next在选项卡之间移动

javascript jquery twitter-bootstrap

Javascript 引导选项卡通过按钮Prev/next在选项卡之间移动,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,“引导选项卡通过“上一页/下一页”按钮在选项卡之间移动。” 我有一个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

“引导选项卡通过“上一页/下一页”按钮在选项卡之间移动。”

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

我会这样处理：

HTML:

因为我不想处理所有的按钮类，所以我使用了正常的样式。

在
单击
事件的下一个按钮和上一个按钮上调用此通用函数


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


现场演示@

注意：我已经从html中删除了为next和previous按钮添加的click events回调，而是为Jquery本身中的两个按钮添加了click events回调函数


快乐编码：）
//这是最终的解决方案（感谢：gpgekko和dreamweiver）



$（“.a-btn-text”）。单击（函数（）
{ 
var目标=$（“.nav tabs li.active”）；
var同级；
如果（$（this）.text（）=“Next”）
{
sibbling=target.next（）；
}
其他的
{
sibbling=target.prev（）；
}
如果（同级为（“li”））
{
兄弟姐妹。子女（“a”）。选项卡（“显示”）；
$（“[class='btn btn large btn block btn success disabled']”）。removeClass（“btn btn large btn block btn success disabled”）；
sibbling.children（“a”）.addClass（“btn btn大型btn块btn成功禁用”）；
}
});

这是你想要的东西

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



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


CSS


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



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





    

  • 

    • 

  • 

    • 

  • 

    • 


帐单地址
帐单地址表


您可以将自定义属性添加到所有选项卡项中，例如名为tabIdentifier=“tab”+某些枚举数的自定义属性。所以你可以有一个通用的javascript方法，点击按钮就会触发，这将检索按钮的包装选项卡，即div读取此自定义属性，然后根据枚举数，您可以将上一个或下一个选项卡设置为活动状态，方法是将枚举数减1或加1，然后选择所需的选项卡。@user3193259:代码中的语法很少，我现在已经更正了。我现在将尝试并告诉您。你能修改这个@dreamweiver吗。只有上面的选项卡在更改，但内容没有更改。var i=1$（“.nav tabs li:eq（i）a”）.tab（'show'）；i++；//我试过了，但它不起作用。你确定没有问题，修复后会让你知道。谢谢，我必须添加这个，但我想我会先用谷歌搜索一下，所以你帮我省去了麻烦：）@user3193259它对我有效，看这个小提琴：。也许我误解了什么？是的，谢谢你它起作用了。但我也有同样的问题，只是上面的选项卡正在更改，但内容没有更改。@user3193259我的错，看看那些你实际上不应该自己删除/添加活动类的文档。最新提琴：非常完美。非常感谢。我现在唯一的问题是如何更改“btn btn大btn块btn成功禁用”的类。我尝试了此$（“[class='btn btn大btn块btn成功禁用']”）。removeClass（“btn btn大btn块btn成功禁用”）$（此）.sibbling（“li”）.addClass（“btn btn大型btn块btn成功禁用”）；第一行从上一个选项卡中删除css，但第二行没有将css添加到下一个选项卡中。

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