纯CSS标签转换

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