Создание кнопки «Далее» для переключения между вкладками jQuery - PullRequest
Новая
       7

Создание кнопки «Далее» для переключения между вкладками jQuery

19 голосов
/ 15 июня 2010

Как создать кнопку, которая будет переходить на следующую вкладку 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 ]

23 голосов
/ 15 июня 2010

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

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

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

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

Вы можете просмотреть демонстрацию здесь

В качестве альтернативы, каждая ссылка «Следующая вкладка» может указывать на конкретную вкладку и использовать метод select , например так: 

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

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

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

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

11 голосов
/ 07 февраля 2013

Я обнаружил, что с UI 1.10.0 это решение больше не работает, так как «выбранный» устарел. Следующее будет работать как в 1.10, так и в более ранних версиях - 

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

});
0 голосов
/ 15 февраля 2013

Основываясь на ответе Ника Крэйвера, вот как я создал ту же функциональность, используя кнопки «Далее», которые выглядят так в HTML в нижней части каждой вкладки div: 

<button class="btnNext" style="float:right">Next</button>

На основе ответа Ника, который я создалдве функции: 

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");

, и это дает возможность каждой кнопке перейти кследующая вкладка.

...