Создание кнопки Next для переключения через вкладки jQuery

Question

Создание кнопки Next для переключения через вкладки jQuery

Как я могу создать кнопку, которая прокрутит к следующей вкладке 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();
});

19

jquery html tabs jquery-tabs

задан nbrooks 9 November 2014 в 04:31

1 ответ

Другие вопросы по тегам:

jquery html tabs jquery-tabs

Похожие вопросы:

score 23 · Accepted Answer

Вы можете использовать selected опцию для перемещения, как здесь:

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

Просто измените ваш якорь, чтобы он соответствовал, как здесь:

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

Вы можете посмотреть демо здесь

Альтернативно, сделайте каждую ссылку "Next Tab" указывающей на определенную вкладку и используйте select метод, как здесь:

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

Тогда вы можете использовать немного более короткий jQuery и переходить на любую вкладку, какую захотите:

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

Вот демонстрация этого подхода