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

注意：

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

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

1 个答案: