jquery - jqueryタブの次へボタンが機能しない

Question

jQueryタブを使用していますが、次のボタンで次のタブに移動したい

    $(".next-tab").click(function () {
       var selected = $("#tab-div").Tabs("option", "selected");
       alert(selected);
    $("#tab-div").Tabs("option", "selected", selected + 1);
    });


    <div id="tab-div">
    <ul class="nav">
    <li><a href="#tab1" class="current">New Group</a></li>
    <li><a href="#tab2">For Companies</a></li>
    </ul>
    <div class="list-wrap">
    <div id="tab1" class="">
    <table width="70%" border="0" cellspacing="0" cellpadding="5" class="alltbls creatgrp">
    <tr>
    <td width="239" class="td-left req">Group Name</td>
    <td> <asp:TextBox ID="txtGroupName" class="text" runat="server" TabIndex="1" onchange="ontextchange()"></asp:TextBox>  </td>
    </tr>
</table>

    </div>
    <div id="tab2" class="">
        <table width="70%" border="0" cellspacing="0" cellpadding="5" class="alltbls creatgrp">
        <tr>
            <td width="239" class="td-left req">Group Name</td>
            <td> <asp:TextBox ID="txtGroupName" class="text" runat="server" TabIndex="1" onchange="ontextchange()"></asp:TextBox>  </td>
            </tr>
        </table>
    </div>

アラートで、タブ インデックスの代わりにオブジェクト object を取得しています。

ありがとう、

Answer 1

ここにあなたがする必要があるものがあります：DEMO

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

Answer 2

「タブ」は小文字にする必要があります。「$(your_div).tabs();」を使用することを忘れないでください。コードの開始時;

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

Answer 3

Tabs小文字にする必要があります - tabs.

$(".next-tab").click(function () {
    var selected = $("#tab-div").tabs("option", "selected");
    alert(selected);
    $("#tab-div").tabs("option", "selected", selected + 1);
});