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功能

回答

相關問題