0

次/前のオプションでタブを制御しようとしています。これは私のJSFIDDLE の例です。私は何時間もかけて調査し、このWEBSITEでメソッド NEXT/PREVIOUS 関数を見つけました。私の例ですべてを複製しましたが、結果が得られません。誰かが私の例を見て、私が間違っていることを教えてもらえますか?

次へ/前へ jquery/js

<script>
$(document).ready(function() {
    var $tabs = $('#st_horizontal').tabs();
    $(".st_tab_view").each(function(i) {
        var totalSize = $(".st_tab_view").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }
        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }
    });
    $('.next-tab, .prev-tab').click(function() {
        $tabs.tabs('select', $(this).attr("rel"));
        return false;
    });
});
</script>
4

1 に答える 1

2

まず、jQuery UI タブを使用するには、jQuery UI JS ライブラリを含める必要があります。あなたのフィドルを編集してそれを含めると、次のボタンが表示されました - http://jsfiddle.net/100thGear/kFNtX/3/

次に、同じ DOM 要素 (スライド タブと jQuery UI タブ) で 2 つのタブ プラグインを組み合わせて、jQuery UI の方法を使用してプログラムでトラバースしようとしています。これはあまりうまくいかないと思います。使用するプラグインを 1 つ選択する必要があります。

第 3 に、スライド タブ プラグインには、次へボタンと前へボタンが既に用意されています。したがって、上記で参照した Web サイトの次/前の機能を jQuery UI タブでのみ使用することをお勧めします。

お役に立てれば！

更新: このフィドル - http://jsfiddle.net/100thGear/PS336/ - は、スライド タブで次/前の機能を実現する方法を示しています。

于 2012-06-23T04:36:10.350 に答える