周期jQuery UI的选项卡上的“上一页”和“下一步”按钮

我使用jQuery UI选项卡为我的网站。周期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天后无解卡。我在网上搜索了很多，但没有解决这个问题。

来源

2012-02-01 Django Anonymous

你可以指望.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()您单击处理

来源

2012-02-01 06:35:54

感谢您的快速回复的人，你真的解决了我的问题...这很好。你真的很棒。 – 2012-02-01 07:02:46

很高兴帮助！ – 2012-02-01 07:13:43

你好迪迪尔，感谢您的帮助，我再次卡在一个地方。我需要更改选项卡的fx效果，以便可以按照图像滑块用于滑动的方式将其滑动。从右至左的链接 - 一个正在向后移动。或者你可以看看这个例子： - http://jqueryfordesigners.com/demo/coda-slider.html 以下内容移动采取与它一起的一个内容。如果你能帮忙。谢谢:) – 2012-02-01 13:50:35

周期jQuery UI的选项卡上的“上一页”和“下一步”按钮

回答

相关问题