jQuery滑动选项卡：控制选项 - 下一个/上一个

我想控制与下一个/上一个选项的选项卡。这是我的JSFIDDLE EXAMPLE。我花了数小时研究并在此WEBSITE中找到了方法NEXT/PREVIOUS功能。我已经复制了我的示例中的所有内容，但我没有收到任何结果。有人可以看看我的EXAMPLE并告诉我我做错了什么吗？jQuery滑动选项卡：控制选项 - 下一个/上一个

下一个/上的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>

来源

2012-06-23 CodingWonders90

看起来您已将下一个和上一个制表符放在标记中的错误位置。 –

@MatthewBlancarte，我加上你的评论。你能告诉我究竟在哪里？ – CodingWonders90

尝试为下一个选项卡和prev选项卡添加单独的点击，并尝试使用'parseInt（$（this）.attr（'rel'））'。 –

首先，你必须包括jQuery UI的JS库使用jQuery UI选项卡。我编辑你的小提琴来包含它，我得到了下一个按钮 - http://jsfiddle.net/100thGear/kFNtX/3/

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

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

希望这会有所帮助！

更新：这个小提琴 - http://jsfiddle.net/100thGear/PS336/ - 演示了如何在未来/分组功能可以用滑动标签来实现。

来源

2012-06-23 04:36:10 ganeshk

感谢您的帮助。我加上你的答案。在我接受你的答案之前最后一件事，你能否告诉我一个解决方案，“滑动标签”将有一个下一个/上一个选项？ – CodingWonders90

我更新了我的小提琴（http://jsfiddle.net/100thGear/PS336/），它提供了一个如何使用slidingTabs实现next/prev的示例（请注意，我删除了jQueryUI.js并删除了jQuery UI的初始化标签）。滑动选项卡不公开任何事件/方法来选择下一个和上一个选项卡。所以我即兴创建并触发了标签本身的点击事件。整理标记以正确定位下一个/上一个按钮，并且您有完整的工作模型。祝一切顺利！ – ganeshk

谢谢！非常感谢你的帮助。我加上你的评论并接受你的回答。 – CodingWonders90

jQuery滑动选项卡：控制选项 - 下一个/上一个

回答

相关问题