Question

我现在有五个标签：新报告，旧报告，评委，用户和其他设置。当点击评委或用户时，会有一个用户或评委列表以及一个允许您“添加新用户”或“添加新评判”的按钮。单击一个按钮后，该按钮将变为不可见，并显示一些文本框。保存（或决定取消）新裁判或用户后，再次出现“添加新”按钮。除了再次单击“评判”或“用户”选项卡之外，这一切都很有效，即使您正在添加新按钮，“添加新按钮”也会再次出现。我正试图找出防止这种情况发生的最佳方法。

到目前为止，我已尝试添加$（this）.attr（'disabled'，'disabled'）;对于Judges和Users的点击事件，但我认为这不是正确的方法。有什么想法吗？

代码：

<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。

所以你可以做的是在单击选项卡时显示（）你的保存按钮，如果单击它就隐藏它，并在点击保存/提交/取消（我看不到它们）按钮时显示它这样：

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

JQuery UI选项卡 - 单击选项卡将启用/禁用按钮 - 查看暂时禁用选项卡单击

1 个答案: