使用JQuery的选项卡式布局&；CSS

我正在使用一个简单的选项卡布局来呈现表单，它似乎工作得很好。但我遇到了一个问题，我想用两种形式，而不是一种形式

表1、2和3是一种形式，表4是另一种形式。当用户点击submit（只有一个submit按钮）时，我可以使用JQuery对

form1

中的数据进行序列化，将其传递到php页面，然后序列化

form2

并将其传递到php页面

我遇到的问题是，一旦我在第三个选项卡后移动关闭标签，它就会扰乱布局

单击选项卡1显示

选项卡1

，单击选项卡2显示

选项卡2和4

，单击选项卡3显示

选项卡3

，单击选项卡4不显示任何内容

使用的JQuery如下所示：

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});

我创建了一个，显示了这个问题

有谁能告诉我怎么才能让它工作

---

谢谢

这是更新的代码。更新小提琴

$（文档）.ready（函数（）{
$（“ul#tabs li”）。单击（功能（e）{
//从所有li中删除活动类
$（“ul#tabs li”）.removeClass（“active”）；
//仅将活动类添加到已单击/选定的li
$（此）.addClass（“活动”）；
//获取单击li的索引（位置）。例如，如果单击TAB1，则返回0。如果单击TAB4，则返回3。
var i=$（this.index（）；
//从所有#选项卡（内容）中删除活动类
$（“ul#tab li.active”）.removeClass（“active”）；
//将活动类添加到单击的选项卡位置的#选项卡（内容）。
$（“ul#tab li”）.eq（i）.addClass（“活动”）；
});
});
ul#选项卡{
列表样式类型：无；
填充：0；
文本对齐：居中；
}
ul#tabs li{
显示：内联块；
边框底部：实心1px#000；
填充：10px 20px；
颜色：#000；
光标：指针；
字体大小：12px；
}
ul#tabs li.active{
背景色：#000000；
颜色：#ffffff；
}
ul#标签{
列表样式类型：无；
保证金：0；
填充：0
}
ul#tab li{
显示：无；
填充：0 15px 0 15px；
边框：实心1px#000；
背景色：#bbbbbb；
}
ul#tab li.active{
显示：块；
最小高度：150px；
}
ul#tab li h2{
颜色：#333333；
字体大小：400；
边缘底部：10px；
垫底：10px；
边框底部：实心1px#000；
}
#包装纸{
宽度：850px；
保证金：0自动；
}
.集装箱{
宽度：50%；
保证金：0自动；
填充：0 30px；
}


表1
表2
表3
表4



表1


表2


表3


表4


以下是更新的代码。更新小提琴


$（文档）.ready（函数（）{
$（“ul#tabs li”）。单击（功能（e）{
//从所有li中删除活动类
$（“ul#tabs li”）.removeClass（“active”）；
//仅将活动类添加到已单击/选定的li
$（此）.addClass（“活动”）；
//获取单击li的索引（位置）。例如，如果单击TAB1，则返回0。如果单击TAB4，则返回3。
var i=$（this.index（）；
//从所有#选项卡（内容）中删除活动类
$（“ul#tab li.active”）.removeClass（“active”）；
//将活动类添加到单击的选项卡位置的#选项卡（内容）。
$（“ul#tab li”）.eq（i）.addClass（“活动”）；
});
});
ul#选项卡{
列表样式类型：无；
填充：0；
文本对齐：居中；
}
ul#tabs li{
显示：内联块；
边框底部：实心1px#000；
填充：10px 20px；
颜色：#000；
光标：指针；
字体大小：12px；
}
ul#tabs li.active{
背景色：#000000；
颜色：#ffffff；
}
ul#标签{
列表样式类型：无；
保证金：0；
填充：0
}
ul#tab li{
显示：无；
填充：0 15px 0 15px；
边框：实心1px#000；
背景色：#bbbbbb；
}
ul#tab li.active{
显示：块；
最小高度：150px；
}
ul#tab li h2{
颜色：#333333；
字体大小：400；
边缘底部：10px；
垫底：10px；
边框底部：实心1px#000；
}
#包装纸{
宽度：850px；
保证金：0自动；
}
.集装箱{
宽度：50%；
保证金：0自动；
填充：0 30px；
}


表1
表2
表3
表4



表1


表2


表3


表4


谢谢-我现在测试一下，然后再给你回复。你能告诉我发生了什么变化，这样我就能从中吸取教训了。thx.我刚刚在
中重新格式化了代码。单击（）
。1.从所有
li
中删除类
.active
。2.将类
.active
添加到单击的
li
及其相应的内容中。谢谢-我现在测试一下，然后返回给您。你能告诉我发生了什么变化，这样我就能从中吸取教训了。thx.我刚刚在
中重新格式化了代码。单击（）
。1.从所有
li
中删除类
.active
。2.将类
.active
添加到单击的
li
及其相应的内容。