爲每個標籤頁的jquery ui選項卡函數

Question

如何爲jquery UI選項卡的每個索引綁定一個函數？

例如，我創建了3部分幻燈片註冊，第1步是一個表單並進行了驗證，我想將代碼放在第1步的加載中，同時向選項卡添加類以禁用＃ 2，＃3時，在1，關閉＃1和＃3時，在＃2

Answer 1

無需綁定到標籤的功能，它內置的插件：

從plugin page：

$('#tabs').tabs({ 
    select: function(event, ui) { ... } 
}); 

函數裏面可以確定curre NT標籤，你是在和你所需要從那裏做：

• 獲取當前選項卡索引

  currentTabIndex = $('#tabs').tabs('option', 'selected') 
  

• 獲取當前選項卡的內容ID（從HREF） - 有可能是一個更簡單的方法，但我還沒有找到它。

  currentTabContent = $($('.ui-tabs-selected').find('a').attr('href')); 
  

但看到你發佈的有關此選項卡/表單您要使用系統中的其他問題，我扔在一起demo here。

HTML

<div id="tabs"> 
<ul class="nav"> <!-- this part is used to create the tabs for each div using jquery --> 
    <li class="ui-tabs-selected"><a href="#part-1"><span>One</span></a></li> 
    <li><a href="#part-2"><span>Two</span></a></li> 
    <li><a href="#part-3"><span>Three</span></a></li> 
</ul> 

<div id="part-1"> 
    <form name="myForm" method="post" action="" id="myForm"> 
    <div class="error"></div> 
    Part 1 
    <br /><input type="checkbox" /> #1 Check me! 
    <br /> 
    <br /><input id="submitForm" type="button" disabled="disabled" value="next >>" /> 
    </form> 
</div> 

<div id="part-2"> 
    <div class="error"></div> 
    Part 2 
    <br />Search <input type="text" /> 
    <br /> 
    <br /><input id="donePart2" type="button" value="next >>" /> 
</div> 

<div id="part-3"> 
    <div class="error"></div> 
    Part 3: 
    <br />Some other info here 
</div> 
</div> 

腳本

$(document).ready(function(){ 
// enable Next button when form validates 
$('#myForm').change(function(){ 
    if (validate()) { 
    $('#submitForm').attr('disabled','') 
    } else { 
    $('#submitForm').attr('disabled','disabled') 
    } 
}) 
// enable form next button 
$('#submitForm').click(function(){ 
    // enable the disabled tab before you can switch to it, switch, then disable the others. 
    if (validate()) nxtTab(1,2); 
}) 
// enable part2 next button 
$('#donePart2').click(function(){ 
    var okForNext = true; // do whatever checks, return true 
    if (okForNext) nxtTab(2,1); 
}) 
// Enable tabs 
$('#tabs').tabs({ disabled: [1,2], 'selected' : 0 }); 
}) 
function validate(){ 
if ($('#myForm').find(':checkbox').is(':checked')) return true; 
return false; 
} 
function nxtTab(n,o){ 
// n = next tab, o = other disabled tab (this only works for 3 total tabs) 
$('#tabs').data('disabled.tabs',[]).tabs('select',n).data('disabled.tabs',[0,o]); 
}