纯css选项卡转换

如何创建此选项卡脚本：

像这样工作：

我在哪里犯了错误

我已经更新了你的，这是一个工作的例子了

在你的小提琴中有各种各样的问题，但是最大的问题是你试图使用的技术依赖于一个设置好的HTML结构。 您试图添加一个额外的

，但在CSS中没有考虑

此外，标签中的链接是空的，没有宽度/高度，因此您无法单击它们

我使用的HTML：

<div class="social_slider">
    <div class="tabs">
        <div class="tab-links">
            <input checked type="radio" name="tab" id="fbtab" />
            <input type="radio" name="tab" id="twtab" />
            <label for="fbtab" class="facebook_icon"><a href="#tab1"></a></label>
            <label for="twtab" class="twitter_icon"><a href="#tab2"></a></label>
        </div>
            <a name="tab1"></a>
                 <article class="facebook_box">
                     Facebook
                 </article>
            <a name="tab2"></a>
                 <article class="twitter_box">
                     Twitter
                 </article> 
   </div>
</div>

使锚可点击：

.social_slider .tab-links label a {
    display: block;
    height: 100%;
}

---

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

.social_slider .twitter_box {
    border-radius: 8px;
    background-color: #19bfe5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display:none;
    height:300px;
    border: 10px solid #68c2ff;
}

.social_slider .tab-links label a {
    display: block;
    height: 100%;
}