根据复选框选择显示/隐藏选项卡

Question

我在一个 JSP 页面上有 4 个选项卡。假设选项卡 1、选项卡 2、选项卡 3、选项卡 4。最初 Tab1 被启用意味着用户可以在 Tab1 上自由地进行工作，但其他选项卡（Tab2、Tab3、Tab4）被禁用，这意味着当用户单击 Tab2 或 Tab3 或 Tab4 时，他将无法看到这些选项卡的内容。我的第一个选项卡上有一个复选框，即 Tab1，如果用户选中该复选框，则 Tab2 将被启用，并且 Tab2 的内容将对用户可见，此时用户还可以查看 Tab1 的内容，因此两个选项卡（Tab1和 Tab2）现在已启用，当用户单击 Tab1 时，他/她可以对 Tab1 的内容执行任何操作，如果他/他单击 Tab2，则像 Tab1 一样，他/他可以对 Tab1 的内容执行任何操作Tab2（类似于浏览器中的两个选项卡），但 Tab3 和 Tab4 的内容将被禁用，直到用户选中 Tab1 中存在的其他两个复选框。现在，如果用户来到 Tab1 并取消选中第二个复选框，则 Tab2 将被禁用，并且用户将被禁止查看 Tab2 的内容。如何在 jquery/javascript/ajax/css/任何方式中做到这一点？

非常感谢任何帮助。

Answer 1

看看 JSFiddle Live Demo 它应该提供一个相当好的示例来开始，简而言之，什么您需要做的是，当用户单击某个元素时，您想要隐藏所有选项卡，并仅显示与您的需求相对应的选项卡，这是代码片段：

var tabids = ["tab-1", "tab-2", "tab-3"];

function showtab(index) {
    var i;
    for (i = 0; i < tabids.length; i++) {
        $("#" + tabids[i]).hide();
    }
    $("#" + tabids[index]).show();
}

如您所见，我定义了一个数组，其中包含的 ID我需要显示/隐藏的选项卡。

编辑：
请查看JSFiddle 现场演示#2