创建用于在jQuery选项卡之间切换的Next按钮
创建用于在jQuery选项卡之间切换的Next按钮
提问于 2010-06-15 19:23:13
如何创建滚动到下一个jQuery选项卡的按钮。我想在标签中有一个下一步按钮，可以滚动到下一个标签，有点像一步一步的教程。
如何做到这一点？到目前为止，我的代码如下。
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p> <a href="nexttab">Next Tab</a>
</div>
<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
</div>JS
$(document).ready(function () {
$("#tabs").tabs();
});回答 3
Stack Overflow用户
回答已采纳
发布于 2010-06-15 19:31:09
您可以使用selected option四处移动，如下所示：
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});只需更改锚点以匹配，如下所示：
<a class="nexttab" href="#">Next Tab</a>或者，使每个“下一个选项卡”链接指向特定的选项卡，并使用select method，如下所示：
<a class="nexttab" href="#fragment-2">Next Tab</a>然后，您可以使用更短的jQuery，并移动到您想要的任何选项卡：
$(".nexttab").click(function() {
$("#tabs").tabs("select", this.hash);
});Stack Overflow用户
发布于 2013-02-07 09:55:35
我发现在UI 1.10.0中，这个解决方案不再起作用，因为"selected“已被弃用。下面的代码在1.10和更早的版本中都有效-
$("#tabs").tabs();
$(".nexttab").click(function() {
var active = $( "#tabs" ).tabs( "option", "active" );
$( "#tabs" ).tabs( "option", "active", active + 1 );
});Stack Overflow用户
发布于 2013-02-16 03:49:48
根据Nick Craver的回答，下面是我如何使用每个标签div底部的HTML中的next按钮生成相同的功能：
<button class="btnNext" style="float:right">Next</button>根据Nick的回答，我创建了两个函数：
function moveToNextTab()
{
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
}
function EnableButtons(className)
{
//Enable Next buttons
var aryButton = document.getElementsByTagName("button");
for(var i = 0; i < aryButton.length; i++)
{
var e = aryButton[i];
if(e.className == className)
{
e.onclick = function()
{
moveToNextTab();
return false;
};
}
}
}因为每个按钮都属于"btnNext“类，所以在页面加载之后，我调用：
onload = EnableButtons("btnNext");这使得每个按钮都能够移动到下一个选项卡。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3044654
复制相关文章
相似问题