创建一个Next按钮来切换jQuery选项卡 [英] Creating a Next button for switching through jQuery tabs

问题描述

如何创建一个滚动到下一个jQuery选项卡的按钮。我希望在选项卡中有一个下一个按钮，可以滚动到下一个选项卡，就像一步一步的教程。

这怎么做？

HTML

 < div ID = 选项卡 > 
< ul> 
< a>< a href =＃fragment-1>< span> One< / span>< / a>< / li> 
< a>< a href =＃fragment-2>< span>两个< / span>< / a>< / li> 
< a>< a href =＃fragment-3>< span>三< / span>< / a>< / li> 
< / ul> 
< div id =fragment-1> 
< p>第一个标签在默认情况下处于活动状态：< / p> < a href =nexttab>下一个标签< / 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（）; 
}）; 
  

解决方案

您可以使用 选定选项左右移动，如下所示：

$ b $

  $（。nexttab）。click（function（）{
 var selected = $（＃tabs）。标签（option，selected）; 
 $（＃tabs）。tabs（option，selected，selected + 1）; 
}）; 
  

只需将您的锚点更改为匹配，如下所示：

 < a class =nexttabhref =＃>下一个标签< / a> 
  

您可以在这里查看演示

---

或者，将每个下一个标签链接点指向特定标签并使用 选择方法，如下所示：

 < a class =nexttabhref =＃fragment-2> Next Tab< / A> 
  

然后你可以使用更短的jQuery，并移动到你想要的任何标签：

$ b $

  $（。nexttab）。click（function（）{
 $（＃tabs）。tabs（select ，this.hash）; 
}）; 
  

下面是这种方法的演示

How can I create a button that will scroll to the next jQuery tab. I want to have a next button within the tabs that will scroll to the next tab, sort of like a step-by-step tutorial.

How can this be done? My code so far is below.

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

解决方案

You can use the selected option to move around, like this:

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});

Just change your anchor to match, like this:

<a class="nexttab" href="#">Next Tab</a>

You can view a demo here

---

Alternatively, make each "Next Tab" link point to a specific tab and use the select method, like this:

<a class="nexttab" href="#fragment-2">Next Tab</a>

Then you can use a bit shorter jQuery, and move to any tab you want:

$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});

Here's a demo of this approach

这篇关于创建一个Next按钮来切换jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！