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

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

3 个答案: