jquery选项卡的Next-Prev功能

我需要Next，jquery选项卡上点击Next和Prev按钮的功能。我正在使用jquery.1.9.1.js和jquery-ui-1.10.2.custom.js文件。我已经实现了下面的代码，但不适合我。jquery选项卡的Next-Prev功能

<script language="javascript" type="text/javascript"> 
    $(function() { 
     $("#ui-tabs").tabs(); 
     function GetSelectedTabIndex() { 
      return $('#ui-tabs').tabs('option', 'selected'); 
     } 

     function ShowTabs(stepNum) { 
      var num = parseInt(stepNum); 
      $('#ui-tabs').tabs('option', 'active', parseInt(GetSelectedTabIndex()) + num); 
     } 

     $('#prev').click(function() { 
      ShowTabs(-1); 
     }) 

     $('#next').click(function() { 
      ShowTabs(-1); 
     }) 
    }); 
</script> 

<div id="ui-tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1">Tab1 content </div> 
    <div id="tabs-2">Tab2 content </div> 
    <div id="tabs-3">Tab3 content </div> 
</div> 
<a id="prev" class="button-style" href="#">Prev</a> 
&nbsp;<a id="next" class="button-style" href="#">Next</a>

但GetSelectedTabIndex返回null。实施过程中出了什么问题？请建议。

来源

2013-04-10 Rajaram Shelar

你能告诉我们一些你的HTML标记吗？ – Derek 2013-04-10 13:47:03

@Derek：请参阅我编辑的问题。 – 2013-04-11 04:15:30

没有为这个版本的jQuery UI选项卡没有select方法。要使您的功能正常工作，您需要将代码更改为

var i=$('#ui-tabs').tabs("option", "active"); //get selected tab index 
$('#ui-tabs').tabs("option", "active", i+num); // num is your tab choise (+1,-1)

这对我很有用。尝试这个。

来源

2013-04-16 10:42:14 Kitty

哦..感谢凯蒂。我只是想知道为什么它不起作用。非常感谢你的帮助。 – 2013-04-16 10:46:49

这个工作对我来说：

$("#ui-tabs").tabs(); 

function GetSelectedTabIndex() { 
     return $('#ui-tabs').tabs('option', 'selected'); 
} 

function ShowTabs(stepNum) { 
    var num = parseInt(stepNum); 
    $('#ui-tabs').tabs('option', 'active', parseInt(GetSelectedTabIndex()) + num); 
}

这在我看来，有一个在使用$tabs变量是没有意义的，因为它是您的本地GetSelectedTabIndex功能，它只是每个函数调用中使用一次...

演示：http://jsfiddle.net/darkajax/A8ejN/

来源

2013-04-10 14:03:17 DarkAjax

我使用了你的代码，但它仍然给我null值'GetSelectedTabIndex（）'函数 – 2013-04-11 04:09:24

这真的很奇怪，我刚刚更新了演示提琴，并且你可以看到它初始警告0，它适用于Google Chrome 26，你使用哪种浏览器？ – DarkAjax 2013-04-11 04:23:06

是的，我看到你的例子，它的工作。我正在使用IE9 – 2013-04-11 04:28:17

<script src="jquery-1.5.1.min.js" type="text/javascript"></script> 
<script src="jquery-ui.js" type="text/javascript"></script> 
<link href="jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
    $(function() { 
     $("#ui-tabs").tabs(); 
    }); 
    function GetSelectedTabIndex() { 
     var $tabs = $('#ui-tabs').tabs(); 
     var selected = $tabs.tabs('option', 'selected'); 
     return selected; 
    } 

    function ShowTabs(stepNum) { 
     var num = parseInt(stepNum); 
     $('#ui-tabs').tabs('select', parseInt(GetSelectedTabIndex()) + num); 
    } 
</script> 



<div id="ui-tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
     Tab1 content 
    </div> 
    <div id="tabs-2" > 
     Tab2 content 
    </div> 
    <div id="tabs-3"> 
     Tab3 content 
    </div> 
</div>

来源

2013-04-11 04:36:29

jquery选项卡的Next-Prev功能

回答

相关问题