Javascript 找不到我的代码，Javascrips/html/css有什么问题

对于我的学校练习，我必须创建3个可单击的选项卡，当它被单击时，应该会打开另一个窗口

我已经看过我的代码很多次了，现在我找不到错误。如果有人能帮我，那就太好了

亲切的问候

正文{
字体系列：“Roboto 2”，“Helvetica Neue”；
保证金：0；
背景#DAD4D4；
文本对齐：居中；
}
.标题{
位置：绝对位置；
排名：0；
右：0；
左：0；
高度：100px；
背景：#70C26F；
盒影：0px 4px 10px rgba（0,0,0,0.5）；
}
李{
背景：#70C26F；
列表样式类型：无；
}
.菜单{
左：-9999px；
位置：绝对位置；
顶部：-9999px；
}
.菜单cirkel{
显示：无；
光标：指针；
显示：块；
位置：固定；
顶部：15px；
z指数：99；
宽度：70px；
高度：70像素；
过渡：所有400ms缓进缓出；
边框：2px实心#D34237；
边界半径：50%；
-webkit用户选择：无；
-moz用户选择：无；
-o-用户选择：无；
用户选择：无；
-webkit点击突出显示颜色：透明；
}
.菜单cirkel:悬停{
边框颜色：ƠEf8；
}
/*插入strepen voor en na菜单streep*/
.菜单cirkel.菜单streep，
菜单西克尔菜单斯特里普：在，
.菜单cirkel.菜单streep:之后{
位置：绝对位置；
最高：50%；
左：50%；
高度：4px；
宽度：35px；
光标：指针；
背景：#D34237；
显示：块；
内容：''；
过渡：所有500ms的缓进缓出；
}
菜单cirkel：悬停菜单streep，
菜单cirkel:悬停菜单streep:在，
.菜单cirkel:悬停.菜单streep:之后{
背景色：ƠEf8；
}
/*菜单斯特里普位置*/
.菜单cirkel.菜单streep{
转换：translate3d（-50%，-4px，0）；
-webkit转换：translate3d（-50%，-4px，0）；
}
.菜单cirkel.菜单streep:之前{
转换：translate3d（-50%，-14px，0）；
-webkit转换：translate3d（-50%，-14px，0）；
}
.菜单cirkel.菜单streep:之后{
转换：translate3d（-50%，10px，0）；
-webkit转换：translate3d（-50%，10px，0）；
}
/*抽屉定义器*/
.抽屉{
位置：固定；
顶部：100px；
左：0；
左边距：自动；
右边距：自动；
z指数：1；
身高：10%；
可见性：隐藏；
过渡性质：全部；
过渡时间：500ms；
过渡定时功能：缓解；
宽度：100%；
盒影：0px 8px 10px rgba（0,0,0,0.5）；
}
/*菜单中心*/
.菜单cirkel{
左：50%；
-webkit转换：translate3d（-50,0,0）；
转换：translate3d（-50%，0，0）；
}
/*点击*/
.菜单：选中.菜单循环{
边框颜色：#D34237；
}
.menu:选中~.menu cirkel.menu streep{
背景色：透明；
}
.菜单：选中~.菜单循环.菜单斯特里普：之前{
变换：translateX（-50%）旋转（45度）；
-webkit变换：translatex（-50%）旋转（45度）；
}
.菜单：选中~.菜单循环.菜单斯特里普：之后{
转换：translateX（-50%）translateY（-10px）；
旋转（-45度）；
-webkit变换：translateX（-50%）translateY（-10px）旋转（-45度）；
顶部：10px；
}
/*抽屉滑下动画*/
.抽屉{
z指数：3；
过渡时间：500ms；
背景：#70C26F；
}
.抽屉{
-webkit转换：translate3d（0,100%，0）；
变换：translate3d（0，-100%，0）；
}
.菜单：选中~.抽屉{
能见度：可见；
-webkit转换：translate3d（0,0,0）；
}
div{
保证金：0；
填充：0；
}
保险商实验室{
填充：0；
保证金：0；
宽度：100%：
}
李{
背景：#70C26F；
列表样式类型：无；
}
李：悬停{
背景：0AFA76；
不透明度：0.4；过滤器：alpha（不透明度=4）；
}
/*标签*/
.标签{
位置：绝对位置；
顶部：150px；
右：0；
左：0；
文本对齐：居中；
}
.标签{
显示：内联块；
位置：相对位置；
边界半径：4px；
利润率：10px；
溢出：隐藏；
文本对齐：居中；
宽度：20%；
高度：50px；
线高：48px；
盒影：0px 2px 10px rgba（0,0,0,0.5）；
}
.选项卡：悬停{
盒影：0px 5px 10px rgba（0,0,0,0.5）；
}
#表1{
背景色：#F4DB33；
}
#表2{
背景色：#962FF8；
}
#表3{
背景色：#DC3C84；
}
/*纸牌*/
.卡片{
位置：相对位置；
顶部：150px；
左：60px；
高度：300px；
宽度：80%；
边界半径：4px；
文本对齐：开始；
溢出：隐藏；
背景：#FFF；
盒影：0px 5px 10px rgba（0,0,0,0.5）；
}
.剩下的内容{
浮动：左；
宽度：22%；
高度：300px；
填充：15px；
文本对齐：居中；
}
.内容权{
填充顶部：15px；
左侧填充：15px；
浮动：对；
宽度：60%；
高度：300px；
}
.x图标{
边界半径：50%；
宽度：60px；
高度：60px；
利润率：10px；
字号：2.5em；
背景色：#70C26F；
盒影：0px 2px 10px rgba（0,0,0,0.5）；
}
.x图标：悬停{
盒影：0px 5px 10px rgba（0,0,0,0.5）；
}
#card1.内容左侧{
背景色：#F4DB33；
}
#card2.内容左侧{
背景色：#972FF8；
}
#卡片3.内容左侧{
背景色：#DC3C84；
}

材料设计

卡1
卡2
卡片3

表1
表2
表3
卡1
x
内容1
卡2
x
内容2
卡片3
x
内容3

使用JS更改css属性时，需要使用

样式。像这样

document.getElementById('card1').style.display='block';


正文{
字体系列：“Roboto 2”，“Helvetica Neue”；
保证金：0；
背景#DAD4D4；
文本对齐：居中；
}
.标题{
位置：绝对位置；
排名：0；
右：0；
左：0；
高度：100px；
背景：#70C26F；
盒影：0px 4px 10px rgba（0,0,0,0.5）；
}
李{
背景：#70C26F；
列表样式类型：无；
}
.菜单{