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

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

  
 
Race
 
Ace
 
Deep
 
 
  
 Prev Next 
  
 Prev Next 
  

我需要一个javascript或jquery函数，通过它我可以通过单击各自选项卡中的按钮逐个浏览所有选项卡。 任何帮助将不胜感激谢谢。

Answer 1

在Click事件的Next和previous按钮上调用此常用function

 $('#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事件回调，而是在Jquery本身为两个按钮附加了一个回调函数

快乐编码:)

Answer 2

我会像这样解决它：

HTML：

 
 
Race 
 
Ace 
 
Deep 
 
 
  
 Prev Next 
  
 Prev Next 
  

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

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

 
 
 
 Billing Address 
 
 Delivery Address 
 
 Review & Payment 
 
 
 
 
Billing Address
 
Billing Address Form
 Continue 
 
 
Shipping Address
 
Shipping Address Form
 Go Back Continue 
 
 
Review & Place Order
 
Review & Payment Tab
 Go Back Place Order 
 
 
 

来自http://www.bootply.com/fGvD5eB3Ms