Javascript 如何管理两个选项卡'；它在一个HTML页面中？

我有管理一个选项卡的代码。但现在我想在该页面上添加另一个选项卡。我怎样才能同时管理两个单独的选项卡？第一个选项卡用于管理方框，其他选项卡用于管理其他选项卡

我将代码放入“代码片段”中：

window.onload=函数（）{
var classname=document.getElementsByClassName（“tabitem”）；
var-boxitem=document.getElementsByCassName（“框”）；
变量clickFunction=函数（e）{
e、 预防默认值（）；
var a=this.getElementsByTagName（“a”）[0]；
var span=this.getElementsByTagName（“span”）[0]；
var href=a.getAttribute（“href”）.replace（“#”，”）；
对于（变量i=0；i

工具栏{
背景#03A9F4；
}
.标签{
垫面：1%；
}
.tabs ul{
列表样式：无；
保证金：0；
宽度：100%；
溢出：隐藏；
填充：0；
}
李先生{
浮动：对；
宽度：50%；
}
.标签a{
位置：相对位置；
颜色：白色；
文字装饰：无；
显示：块；
宽度：100%；
文本对齐：居中；
线高：40px；
字号：500；
字体大小：13px；
颜色：#ecf0f1；
溢出：隐藏；
}
.tabs.active a{
颜色：#fff；
}
.选项卡.活动a:之后{
高度：2倍；
宽度：100%；
显示：块；
内容：“；
底部：0px；
左：0px；
位置：绝对位置；
背景#f57c00；
-webkit动画：边框向前扩展0.2s立方贝塞尔（0.4,0.0,0.4,1）0s交替；
-moz动画：边框向前扩展0.2s立方贝塞尔（0.4,0.0,0.4,1）0s交替；
过渡：所有1s三次贝塞尔（0.4,0.0,1,1）；
}
.一段时间{
位置：绝对位置；
左边距：-40px；
利润上限：-24px；
宽度：80%；
背景#f57c00；
身高：100%；
显示：块；
边界半径：50%；
不透明度：0；
}
.选项卡a span.已单击{
-webkit动画：展开0.6s立方贝塞尔（0.1,0.0,0.4,1）0s法线；
-moz动画：展开0.6s立方贝塞尔（0.1,0.0,0.4,1）0s法线；
边框底部：2个实心#f57c00；
}
.内容{
盒影：插入0px 5px 6px-3px rgba（0,0,0,0.4）；
高度：自动；
填充顶部：50px；
位置：相对位置；
顶部：0px；
溢出：隐藏；
}
.盒子{
显示：无；
溢出：自动；
位置：相对位置；
溢出x：隐藏；
}
.box.show{
显示：块；
}
.box2{
显示：无；
溢出：自动；
位置：相对位置；
溢出x：隐藏；
}
.box2.show{
显示：块；
}
@-webkit关键帧展开{
0% {
/*背景：rgba（255255141,1）*/
/*不透明度：1*/
边界半径：100%；
/*变换：比例（0）；
-webkit变换：缩放（0）；
-moz变换：比例（0）*/
}
50% {
/*背景：rgba（255255141,0.8）*/
边界半径：50%；
}
100% {
/*背景：rgba（255255141,0）*/
/*变换：尺度（3）*/
边界半径：0；
/*-webkit转换：规模（3）；
-moz变换：尺度（3）；
不透明度：1*/
}
}
@-moz关键帧展开{
0% {
/*背景：rgba（255255141,1）*/
/*不透明度：1*/
边界半径：100%；
/*变换：比例（0）；
-moz变换：比例（0）*/
}
50% {
/*背景：rgba（255255141,0.8）*/
边界半径：50%；
}
100% {
/*背景：rgba（255255141,0）*/
/*变换：尺度（3）*/
边界半径：0；
/*-moz变换：尺度（3）；
不透明度：1*/
}
}
@-webkit关键帧边框展开{
0% {
不透明度：0；
宽度：0；
}
100% {
不透明度：1；
宽度：100%；
}
}
@-moz关键帧边框展开{
0% {
不透明度：0；
宽度：0；
}
100% {
不透明度：1；
宽度：100%；
}
}

党卫军
555




党卫军
555