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 JS 库才能使用 jQuery UI 选项卡。我编辑了你的小提琴以包含它，并显示了下一个按钮 - http://jsfiddle.net/100thGear/kFNtX/3/

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

第三，滑动标签插件已经为您提供了下一个和上一个按钮。因此，我建议仅使用您上面提到的网站中的下一个/上一个功能与 jQuery UI 选项卡一起使用。

希望这可以帮助！

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

于 2012-06-23T04:36:10.350 回答