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