Question

我正在尝试使用下一个/上一个选项来控制标签。这是我JSFIDDLE EXAMPLE。我花了几个小时研究并在此WEBSITE中找到了方法NEXT / PREVIOUS函数。我已经复制了我的例子中的所有内容，但我没有得到任何结果。有人可以看看我的EXAMPLE并告诉我我做错了什么吗？

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>

Answer 1

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

其次，您将两个选项卡插件组合在同一个DOM元素（滑动选项卡和jQuery UI选项卡）上 - 然后您尝试使用jQuery UI方式以编程方式遍历它们。我认为这不会很好。您需要选择一个要使用的插件。

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

希望这有帮助！

更新：这个小提琴 - http://jsfiddle.net/100thGear/PS336/ - 演示了如何使用滑动标签实现下一个/上一个功能。

jQuery Sliding Tabs：控制选项 - NEXT / PREVIOUS

1 个答案: