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(); 
     } 
});