19

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

3 に答える 3

24

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

これがこのアプローチのデモです

于 2010-06-15T11:31:08.850 に答える
12

UI 1.10.0 では、「選択」が廃止されたため、このソリューションは機能しなくなったことがわかりました。以下は、1.10 以前のバージョンの両方で機能します。

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

});
于 2013-02-07T01:55:35.153 に答える
0

Nick Craver の回答に基づいて、各タブ div 内の下部にある HTML で次のように見える次のボタンを使用して、同じ機能を作成する方法を次に示します。

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

Nick の回答に基づいて、2 つの関数を作成しました。

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

これにより、各ボタンが次のタブに移動できるようになります。

于 2013-02-15T19:49:47.767 に答える