Javascript 引导选项卡内容在单击导航中的其他链接时不会自行删除

所以这里发生的事情是，我有4个不同的选项卡，它们根据单击哪个选项卡（活动）来更改它们的内容。一切正常，内容也在更改，但第一个选项卡的内容并没有自行删除，因此任何其他选项卡的内容都被向下推。在我看来，这里发生的事情是，第一个选项卡的内容以某种方式具有不透明度：0；当点击任何其他选项卡时，即使我没有在CSS中设置任何类型的不透明度我是第一次来这里因此，如果代码片段不是myb，那么我很抱歉，因为它不能最好地反映正在发生的事情。提前谢谢

一,

$（文档）.ready（函数（）{
$（'ul.nav>li'）
。单击（功能（e）{
$（'ul.nav>li'）
.removeClass（“主动链接”）；
$（this.addClass（'active-link'）；
});
});

。关于导航{
显示器：flex；
证明内容：中心；
宽度：80%；
最大宽度：1800px；
保证金：0自动；
保险商实验室{
填充：50px 0px；
宽度：100%；
显示器：flex；
对正内容：空间均匀；
保证金：0；
边框底部：1px纯黑；
a{
颜色：黑色；
字体大小：400；
文字装饰：无；
字号：1.1rem；
文本对齐：居中；
填充物：5px10px；
}
a:悬停{
颜色：rgb（45147165）；
}
.主动链接{
a{
颜色：rgb（209,86,65）；
}
人力资源{
边框：1px纯黑；
宽度：100%；
边际上限：0px；
过渡：0.5s；
}
}
}
}
.选项卡内容{
填充：90px 0px；
#关于{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
div{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
调整内容：灵活启动；
氢{
文本对齐：居中；
}
p{
文本对齐：对齐；
宽度：70%；
}
}
.首先{
网格柱：1/2；
网格行：1/2；
}
.第二{
网格柱：2/3；
网格行：1/2；
氢{
文本对齐：居中；
}
p{
文本对齐：对齐；
}
}
.第三{
网格柱：1/2；
网格行：2/3；
边缘顶端：40px；
氢{
文本对齐：居中；
}
p{
文本对齐：对齐；
}
}
.第四{
网格柱：2/3；
网格行：2/3；
边缘顶端：40px；
氢{
文本对齐：居中；
}
p{
文本对齐：对齐；
}
}
氢{
字体大小：2.5rem；
字号：100；
}
p{
线高：1.5；
}
}
}

我们是谁？
我可能在地理上挣扎，但我肯定我就在这附近

我们提供什么？
他最终的梦想是心满意足，睡八个小时

我们的位置
这是她第一次训练彩虹独角兽

我们的故事
刀子掉了，她正在磨刀

常见问题
夜空
总有一天我会的

夜空
夜空