twitter-bootstrap Bootstrap 选项卡通过按钮在选项卡之间移动上一个/下一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21309773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tabs to move between tabs through buttons Prev/next
提问by
"Bootstrap tabs to move between tabs through buttons Prev/next."
“引导选项卡通过上一个/下一个按钮在选项卡之间移动。”
I have a javascript function that let me go one tab 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");
}
);
my html:
我的 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>
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.
我需要一个 javascript 或 jquery 函数，通过它我可以通过单击各自选项卡中的按钮一个一个地浏览所有选项卡。任何帮助将不胜感激谢谢。
采纳答案by dreamweiver
Call this common function on Next and previous buttons on Clickevent
在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
}
}
LIVE DEMO @ http://jsfiddle.net/R3mCY/50/
现场演示@ http://jsfiddle.net/R3mCY/50/
Note:I have removed the click events callback added for next and previous button from the html, instead attached a callback function for click event for both buttons in Jquery itself
注意：我已经从 html 中删除了为下一个和上一个按钮添加的点击事件回调，而是在 Jquery 本身中为两个按钮附加了一个点击事件的回调函数
Happy Coding :)
快乐编码:)
回答by gpgekko
I'd tackle it like this:
我会这样处理：
HTML:
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>
And JS:
和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");
}
});
I grabbed the normal styling from http://getbootstrap.com/javascript/#tabscause I didn't feel like working with all the button classes.
我从http://getbootstrap.com/javascript/#tabs 获取了正常样式，因为我不想使用所有按钮类。
回答by gpgekko
// This is the final solution (Thanks to: gpgekko and dreamweiver)
// 这是最终的解决方案（感谢：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>
回答by bhaveshkac
This is thing you want.
这是你想要的东西。
JS
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
CSS
.tabs-wrap {
margin-top: 40px;
}
.tab-content .tab-pane {
padding: 20px 0;
}
Finally HTML
最后是 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 & 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 & Place Order</h3>
<p>Review & 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>
