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

Question

我在一个JSP页面上有4个选项卡。 让我们说Tab 1，Tab2，Tab3，Tab4。 最初启用Tab1意味着用户可以自由地在Tab1上完成工作，但其他选项卡（Tab2，Tab3，Tab4）被禁用，这意味着当用户点击Tab2或Tab3或Tab4时，他无法看到这些选项卡的内容。 我的第一个选项卡上出现一个复选框，即Tab1，如果用户将检查该复选框，则Tab2将被启用，Tab2的内容将对用户可见，此时用户还可以查看Tab1的内容，因此两个选项卡（Tab1）现在启用了Tab2），当用户点击Tab1然后他/她可以对Tab1的内容进行任何操作，如果他/她将点击Tab2然后像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 Live Demo Take＃2

Answer 2

试试这个链接

http://www.barelyfitz.com/projects/tabber/

希望这对你有所帮助..

顺便说一句，这也是好东西

http://docs.jquery.com/UI/Tabs

Answer 3

我想这会解决你的问题，

它对复选框进行了验证，以继续使用下一个选项卡。

http://flowplayer.org/tools/demos/tabs/wizard.html