Question

如何制作此标签脚本：FIDDLE

像这样工作：DEMO

我在哪里弄错了？

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

Answer 1

我已更新了您的Fiddle，这是一个有效的示例。

您的小提琴中存在各种问题，但最大的问题是您尝试使用的技术取决于设置的HTML结构。您尝试添加额外的<div class="tab-content">，而您的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>

CSS最重要的变化是删除.tab-content并使用.twitter_box和position: absolute;更新top/left/right/bottom：

.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%;
}

纯css标签转换

1 个答案: