Javascript 使用文本框取消隐藏jquery选项卡会取消隐藏错误的部分

我有一个表单，它有几个复选框，当这些复选框被选中时，一个对应的标签下面有一个部分被取消隐藏。不幸的是，当我选中第二个或第三个框时，将显示正确的选项卡，但属于第一个选项卡的部分将被取消隐藏。我在JSFIDLE中有一个例子：。如果选中显示Extranet Access的框，则会出现使用协议部分（US 531）。以下是我用来取消隐藏选项卡和部分的代码：

//hide/show UA Section
        $("#use-agreement-required").click(function() {
            if ($("#use-agreement-required").is(":checked"))
            {
                $(".UASection").show("fast");
            } else {
                //otherwise hide it
                $(".UASection").hide("fast");
            }

        });

        //hide/show Extranet Section
        $("#extranet-access").click(function() {
            if ($("#extranet-access").is(":checked"))
            {
                //show hidden class
                $(".extranetSection").show("fast");

            } else {
                //otherwise hide it
                $(".extranetSection").hide("fast");
            }

        });

        //hide/show Move It Section
        $("#move-it-access").click(function() {
            if ($("#move-it-access").is(":checked"))
            {
                //show hidden class
                $(".moveItSection").show("fast");

            } else {
                //otherwise hide it
                $(".moveItSection").hide("fast");
            }

        });

        //Refresh tabs
        $("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
            $("#contractTypes").tabs("refresh");
        });

---

您确定选项卡是您要在那里执行的操作吗？从用户界面的角度来看，我认为您正在走一条混乱的道路

也就是说，显示选项卡是不够的，您需要告诉选项卡控件您正在激活一个新选项卡：

$（“#合同类型”）.tabs（{active:1}）

---

请记住，索引是基于0的。

您确定选项卡是您想要在那里执行的操作吗？从用户界面的角度来看，我认为您正在走一条混乱的道路

也就是说，显示选项卡是不够的，您需要告诉选项卡控件您正在激活一个新选项卡：

$（“#合同类型”）.tabs（{active:1}）

---

请记住，索引是基于0的。

这会弄乱您的代码。.已删除，一切正常

//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
    $("#contractTypes").tabs("refresh");
});

---

这会把你的代码弄乱..删除，没问题

//Refresh tabs
$("#use-agreement-required,#extranet-access,#move-it-access").click(function () {
    $("#contractTypes").tabs("refresh");
});

---

第一个选项卡并没有具体问题。在选中任何复选框之后，就会出现这种情况，然后单击相应的选项卡。这不是第一个选项卡的具体问题。选中任何复选框后，就会出现这种情况，然后单击相应的选项卡。我不知道您的浏览器如何，但在Chrome上，它会将新选项卡的内容推到活动选项卡的内容下方。（同时选择两件事）您确定列出了正确的小提琴吗？我看不到你引用的代码。你的权利！因为窗口有点小，我不知道你的浏览器，但是在Chrome上，它会将新选项卡的内容推到活动选项卡的内容之下。（同时选择两件事）您确定列出了正确的小提琴吗？我看不到你引用的代码。你的权利！因为窗户有点小，所以我没看到小提琴上有这种情况。这是正确的答案。我太慢了，但这里有一个小提琴：这是接近。。。但是，如果您按以下顺序单击：使用协议-外联网-移动它-移动它-外联网-使用协议，当您单击外联网复选框取消选中它时，移动它部分将重新出现，即使不再选中移动它复选框。此外，我当然愿意接受用户界面上的建议，但此表单的内容远不止于此。这只是表格的一部分。这是一个文档管理系统，而不是一个网站，这也毫无价值。用户填写此表单以允许系统根据复选框值和他们在表单上填写的其他字段生成Word文档。但我确信UI原则仍然适用。我发现：一旦您的选项卡列表项具有唯一ID，您可以使用$（“#tabs-1-tab”）.css（“display”、“none”）或$（#tabs-1-tab”）.css（“display”、“list item”）将其隐藏起来以再次显示。这种情况下的一个技巧是，如果隐藏当前选定的选项卡，则需要通过故意选择另一个选项卡来刷新显示的内容，否则关闭的选项卡的内容仍将显示。。。这确实需要您确定哪些选项卡处于打开状态，并从中选择一个。这是正确的答案。我太慢了，但这里有一个小提琴：这是接近。。。但是，如果您按以下顺序单击：使用协议-外联网-移动它-移动它-外联网-使用协议，当您单击外联网复选框取消选中它时，移动它部分将重新出现，即使不再选中移动它复选框。此外，我当然愿意接受用户界面上的建议，但此表单的内容远不止于此。这只是表格的一部分。这是一个文档管理系统，而不是一个网站，这也毫无价值。用户填写此表单以允许系统根据复选框值和他们在表单上填写的其他字段生成Word文档。但我确信UI原则仍然适用。我发现：一旦您的选项卡列表项具有唯一ID，您可以使用$（“#tabs-1-tab”）.css（“display”、“none”）或$（#tabs-1-tab”）.css（“display”、“list item”）将其隐藏起来以再次显示。这种情况下的一个技巧是，如果隐藏当前选定的选项卡，则需要通过故意选择另一个选项卡来刷新显示的内容，否则关闭的选项卡的内容仍将显示。。。这确实需要您确定哪些选项卡处于打开状态，然后选择其中一个选项卡。