純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

**更新：這是this question **

這裏重複的變化，使其工作：

第一個小bug：關閉錨標記像這樣：</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>

的「.facebook_box」之前然後刪除「.social_slider .TAB內容」或也將其添加到該行做的魔力，否則你覆蓋魔法與你的班級的更精確的定義。 然後你需要增加標籤內鏈接的大小，否則你只需點擊標籤，而不是錨點。

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