在“上一个”上循环 Jquery UI 选项卡和“下一个”按钮

Question

我正在为我的网站使用 Jquery UI 选项卡。

<script type='text/javascript'>
//<![CDATA[ 
jQuery(window).load(function(){
jQuery('#myTabs').tabs({ fx: { opacity: 'toggle' }});

jQuery('.next-product').click(function(){ 
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected+1);
});

jQuery('.previous-product').click(function(){ 
var jQuerytabs = jQuery('#myTabs').tabs();
var selected = jQuerytabs.tabs('option', 'selected');
jQuerytabs.tabs('select', selected-1);
}); 

正如您所看到的，我一直在使用上一个下一个按钮从一个选项卡移动到另一个选项卡。 我的问题是“当我单击下一个并且如果最后一个选项卡打开时，第一个选项卡应该自动打开，同样，当我单击上一个并且如果第一个选项卡打开时，最后一个选项卡应该自动打开"

请帮帮我，我已经被困了 3 天多了，没有解决办法。我在网上搜索了很多，但没有解决这个问题。

Answer 1

您可以计算 .ui-tabs-panel 元素的数量。

jQuery(window).load(function() {

    var $tabs = jQuery('#myTabs');

    $tabs.tabs({
        fx: {
            opacity: 'toggle'
        }
    });

    var amount = $tabs.find('.ui-tabs-panel').length;

    jQuery('.next-product').click(function() {
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
    });

    jQuery('.previous-product').click(function() {
        var selected = $tabs.tabs('option', 'selected');
        $tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
    });

});

DEMO

注意：

• 已经选择您的选项卡元素并重新使用选择器< code>var $tabs = jQuery('#myTabs');，这样会更高效，
• 无需在点击处理程序上重新调用 .tabs()