Pure Вкладки 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

** UPDATE: Это дубликат this question **

Вот изменения, чтобы сделать его работу:

Первая небольшая ошибка: закрыть якорь тег, как это: </a> не как это <a/>.
Затем измените порядок ваших статей:

<div class="tab-content"> <a name="tab2"></a> <article class="twitter_box">t</article> <a name="tab1"></a> <article class="facebook_box">f</article> </div>

Затем удалить «.social_slider .tab-содержание» до «.facebook_box» или добавить его также к линиям делать магию иначе вы перезаписать магия с более точным определением вашего класса. И тогда вам нужно увеличить размер вашей ссылки внутри вкладки, иначе вы нажимаете только на метку, а не на якорь.

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