jQuery滑动表:控制选项-下一个/前一个

Question

我试图用下一个/前一个选项来控制选项卡。这是我的JSFIDDLE示例。我花了几个小时研究，并在这个网站中找到了下一步/以前的方法。我在我的例子中复制了所有的东西，但是我没有得到任何结果。有人能看看我的示例，告诉我我做错了什么吗？

NEXT/上一次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>

Answer 1

首先，您必须包括jQuery UI JS库才能使用jQuery UI Tabs。我编辑了你的小提琴，把它包括进去，然后显示了下一个按钮- http://jsfiddle.net/100thGear/kFNtX/3/。

其次，将两个选项卡插件组合在同一个DOM元素上(滑动选项卡和jQuery UI选项卡)，然后尝试使用jQuery UI方式以编程方式遍历它们。我不认为这会有什么效果。你需要选择一个插件来使用。

第三，滑动标签插件已经为您提供了next和prev按钮。因此，我建议您只使用上面提到的jQuery UI选项卡中的下一个/前面的函数。

希望这能有所帮助！

Update：这个小提琴- http://jsfiddle.net/100thGear/PS336/ -演示了如何通过滑动Tabs实现下一个/prev功能。