[英]Bootstrap tabs to move between tabs through buttons 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函数,通过单击它们各自选项卡中的按钮,我可以通过它们逐个浏览所有选项卡。 任何帮助,将不胜感激谢谢。
在Click
事件的Next和Previous按钮上调用此通用功能
$('#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本身中为两个按钮的click事件附加了回调函数
快乐编码:)
我会这样解决:
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获取了常规样式,因为我不想使用所有按钮类。
//这是最终的解决方案(感谢: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>
这就是你想要的东西。
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 & 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.