Jquery UI选项卡-下一个和上一个按钮

我正在看Chris Coyier关于为jQueryUI选项卡创建动态下一个和上一个按钮的教程。这些按钮根据它们是否指向第一个或最后一个选项卡来显示/隐藏它们自己。这在2009年的他的例子中非常有效。快进到2011年，不幸的是navs不能与新版本的jquery（特别是jquery-1.6.4）一起工作

作为参考，原始教程：

Coyier脚本将下一个/上一个按钮正确地附加到ui选项卡面板中。但是，这些链接可能是：1）不点击任何内容，2）第一个“下一个”链接直接指向最后一个选项卡，而上一个链接不起作用，或者3）下一个/上一个链接仅指向第一个和最后一个选项卡，跳过这两个选项卡之间的所有内容

我需要的是显示和隐藏下一个或上一个按钮的方式，这取决于查看者是查看第一个还是最后一个选项卡

到目前为止我掌握的代码是

$j = jQuery.noConflict();
$j(function() {

    var jQuery$tabs = $j('#tabs').tabs();
    $j(".events-navnext, .events-navprev").hide();

    $j(".ui-tabs-panel").each(function(i){

        var totalSize = $j(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
        next = i + 2;
            $j(".events-navnext").show();
        }
        if (i != 0) {
        prev = i;
            $j(".events-navprev").show();
        }
    });
    $j('.events-navnext').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected+1);
        return false;
    });
    $j('.events-navprev').click(function(){ 
        var $tabs = $j('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected-1);
        return false;
    });

});

这些按钮可以很好地在我的选项卡中导航。但是，我迫切需要正确地显示和隐藏第一个和最后一个按钮

我尝试过使用Coyier使用的jquery自定义脚本，但仍然不起作用。因此，我假设是Jquery的现代版本导致了原始教程的问题。我也是jquery新手。任何提示或指针都是最受欢迎的。谢谢大家!

---

（注意：这些选项卡是在受密码保护的开发环境中使用的，因此我无法提供工作示例。在本例中，jQuery.noConflict模式是必需的，无法删除。）

在Coyier的示例中，他根据当前面板和总大小将下一个和上一个链接附加到每个面板。这就是为什么上一个没有出现在面板1中，下一个没有出现在最后一个面板中。您的代码正在调用.show（）类名为“events navprev”的所有元素

你试过使用他的密码吗

      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>");
      }

及

编辑：

下面是直接从教程中获得的Coyier代码，它运行良好：

---

我建议从这个开始，然后找出你的不同做法。

我认为你可以通过使用parseInt将索引转换为int来解决这个问题，如下所示

$tabs.tabs('select', parseInt($(this).attr("rel")));

函数需要一个int而不是字符串，下一个和后一个索引也不正确，请参阅下面的修订代码

var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            var next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            var prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function() {
       $tabs.tabs('select', parseInt($(this).attr("rel")));
       return false;
   });

var$tabs=$（'#tabs'）.tabs（）；
$（“.ui选项卡面板”）。每个（功能（i）{
var totalSize=$（“.ui选项卡面板”）.size（）-1；
如果（i！=总尺寸）{
var next=i+1；
$（此）。追加（“”）；
}
如果（i！=0）{
var-prev=i-1；
$（此）。追加（“”）；
}
});
$（'.next tab，.prev tab'）。单击（function（）{
$tabs.tabs（'select'，parseInt（$（this.attr（“rel”）））；
返回false；
});

测试它是否需要一些修复

 $(document).ready(function () {
    var $tabs = $('#tabs').tabs();

    $(".ui-tabs-panel").each(function (i) {

        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function () {
        var cc = $(this).attr("rel");

        $('#tabs').tabs({ active: parseInt(cc) });
        //  $('#tabs').tabs({active:1})
        return false;
    });
});

$（文档）.ready（函数（）{
var$tabs=$（'#tabs'）.tabs（）；
$（“.ui选项卡面板”）。每个（功能（i）{
var totalSize=$（“.ui选项卡面板”）.size（）-1；
如果（i！=总尺寸）{
next=i+1；
$（此）。追加（“”）；
}
如果（i！=0）{
prev=i-1；
$（此）。追加（“”）；
}
});
$（'.next tab，.prev tab'）。单击（函数（）{
var cc=$（this.attr（“rel”）；
$（'#tabs'）.tabs（{active:parseInt（cc）}）；
//$（'#tabs'）。tabs（{active:1}）
返回false；
});
});

是的，我试着直接使用Coyier的代码。链接显示得不错，但实际上并不起作用。这就是为什么我要走法兰克编码路线！我尝试了你添加的脚本作为另一个选项，结果与我发布的内容相同。谢谢你！你能发布一些html吗？由于您正在所有链接上调用.show（），因此您的操作方式将不起作用。也许你没有在每个面板中都有下一个/上一个链接？请参阅我的编辑。我发布了一个fiddle，它使用css技巧中的代码工作得很好

var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i) {
        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            var next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            var prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function() {
       $tabs.tabs('select', parseInt($(this).attr("rel")));
       return false;
   });

 $(document).ready(function () {
    var $tabs = $('#tabs').tabs();

    $(".ui-tabs-panel").each(function (i) {

        var totalSize = $(".ui-tabs-panel").size() - 1;

        if (i != totalSize) {
            next = i + 1;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            prev = i-1;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function () {
        var cc = $(this).attr("rel");

        $('#tabs').tabs({ active: parseInt(cc) });
        //  $('#tabs').tabs({active:1})
        return false;
    });
});