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

时间:2012-02-01 06:26:15

标签: jquery-ui-tabs cycle

我正在为我的网站使用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天以上,没有解决方案。我在网上搜索了很多但没有解决方法。

1 个答案:

答案 0 :(得分: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

注意:

  • 选择您的标签元素并重新使用选择器var $tabs = jQuery('#myTabs');,它会更高效
  • 无需在点击处理程序上重新调用.tabs()