纯CSS选项卡开关

如何使此选项卡脚本：按如下方式工作：

我想在彼此之间切换社交标签，但不起作用

我在哪里犯了错误

a[name="tab1"] + .facebook_box {
    display: block
}
:target + .twitter_box {
    display: block
}
:target ~ a[name="tab1"] + .facebook_box {
    display: none
}

---

**更新：这是的副本**

以下是使其工作的更改：

首先是一个小错误：像这样关闭锚定标记：

不是这样的

然后更改文章的顺序：

T
F

然后删除“.facebook\u框”前面的“.social\u slider.tab content”，或者将其添加到执行魔术的行中，否则您将使用您的类的更精确定义覆盖魔术。 然后，您需要增加选项卡内链接的大小，否则您只需单击标签，而不是锚定

.facebook_box {
    border-radius: 8px;
    background-color: #fff;
    position: relative;
    z-index: 99998;
    display:none;
    height:300px;
    border:10px solid #3a93d6;
}
.twitter_box {
    border-radius: 8px;
    background-color: #19bfe5;
    position: relative;
    z-index: 99998;
    display:none;
    height:300px;
    border: 10px solid #68c2ff;
}

.twitter_icon > a, .facebook_icon > a{
    display: block;
    height: 100%;
    width: 100%;
}

---

它工作得很完美，但当我将.social滑块的顶部位置更改为eg 150px时，当我单击锚时，它总是向下滑动。如何防止点击锚后页面滚动？非常感谢。