Чистые вкладки 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; 
} 

Making анкеры:

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