JQuery UI選項卡 - 單擊選項卡將啓用/禁用按鈕 - 期待暫時禁用選項卡點擊

Question

我現在有五個選項卡：新報告，舊報告，評委，用戶和其他設置。點擊評委或用戶時，會列出用戶或評委名單以及允許您「添加新用戶」或「添加新評委」的按鈕。點擊時，該按鈕變得不可見，並出現一些文本框。保存（或決定取消）新裁判或用戶後，將重新顯示「添加新」按鈕。除了您再次點擊「評委」或「用戶」選項卡之外，即使您正在添加新的按鈕，「添加新按鈕」也會再次出現，這一切都很有效。我試圖找出防止這種情況發生的最佳方法。

到目前爲止，我已經嘗試添加$（this）.attr（'disabled'，'disabled'）;到法官和用戶的點擊事件，但我不認爲這是正確的方法。有任何想法嗎？

代碼：

<div id="tabs" style="width:800px;margin: 0 auto;"> 
    <ul> 

     <li><a href="#tabs-1" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">New Reports</a></li> 
     <li><a href="#tabs-2" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Old Reports</a></li> 
     <li><a href="#tabs-3" onClick="$('#newJudgeLink').show(); $('#newUserLink').hide();">Judges</a></li> 
     <li><a href="#tabs-4" onClick="$('#newJudgeLink').hide(); $('#newUserLink').show();">Users</a></li> 
     <li><a href="#tabs-5" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Other Settings</a></li> 
     </ul> 

     <div style="float:right;"><button id="newUserLink" style="display:none;"     onClick="return false;">Add New User</button></div> 
     <div style="float:right;"><button id="newJudgeLink" onClick="return false;" style="display:none;">Add New Judge</button></div> 

Answer 1

以及第一，我會建議在傳統Jquery的時尚，而不是使用嵌入在HTML onClicks綁定click事件。

所以你可以做的是顯示（）你的保存按鈕，當點擊標籤，隱藏它，如果它本身被點擊，並顯示它當保存/提交/取消（我沒有看到他們那裏）按鈕被點擊像這樣：

$("a[href$=#tabs]").click(function(){ 
    $("a[href$=#tabs]").removeClass("active"); 
    $(this).addClass("active"); 
    if ($(this).attr("href") == "#tabs-3" && !($(this).hasClass("active"))){ 
      $('#newJudgeLink').show(); 
      $('#newUserLink').hide(); 
    } 
    else if ($(this).attr("href") == "#tabs-4" && !($(this).hasClass("active"))){ 
      $('#newUserLink').show(); 
      $('#newJudgeLink').hide(); 
    } 
    else{ 
      $('#newJudgeLink').hide(); 
      $('#newUserLink').hide(); 
    } 
}); 

$("#yourSaveButton,#yourCancelButton").click(function(){ 
     if ($("a.active").attr("href") == "#tabs-3"){ 
      $('#newJudgeLink').show(); 
      $('#newUserLink').hide(); 
     } 
     else{ 
      $('#newUserLink').show(); 
      $('#newJudgeLink').hide(); 
     } 
});