のみタブがタブ

Question

を事前に選択CSS3私はCSS3だけでタブを作成しようとしています使用：ターゲット擬似クラス

HTML：

<div class="tabs_wrapper" style=""> 
    <article class="tabs"> 
     <section id="tab1"> 
      <h2><a href="#tab1">Tab 1</a></h2> 
      <p>This content appears on tab 1.</p> 
     </section> 

     <section id="tab2"> 
      <h2><a href="#tab2">Tab 2</a></h2> 
      <p>This content appears on tab 2.</p> 
     </section> 
    </article> 
</div> 

をCSS：

article.tabs section:target h2 
{ 
    color: #f2f2f2; 
    background-color:#b8b63e; 

} 
article.tabs section:target{ 
    z-index: 2; 
} 

FIDDLE：https://jsfiddle.net/vchawla26/gxt708e7/

すべてが行われています。あなたはラジオボタンと:checkedクラスを使用してこれを作成することができます何のタブをクリックしないとターゲットが空である場合は、最初は負荷に、タブがハイライトされていない:(

Answer 1

を：。唯一の問題に直面して

:targetを使用していないため、ページジャンプはありません

以下のコード例でわかるように、各タブにはdisplay:noneで非表示のラジオボタンがあり、タブとしてラベルが付いています含有量はdiv。

HTML

<div class="tabs_wrapper"> 
    <div class="tabs"> 

    <div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Tab 1</label> 

     <div class="content"> 
      <p>This content appears on tab 1.</p> 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Tab 2</label> 

     <div class="content"> 
      <p>This content appears on tab 2.</p> 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Tab 3</label> 

     <div class="content"> 
      <p>This content appears on tab 3.</p> 
     </div> 
    </div> 

</div> 

コンテンツ領域は、絶対位置で互いの上にあり、ラジオボタンがチェックされている場合、コンテンツ領域は、zインデックスを持つ上に座るします。

CSS

.tabs { 
    position: relative; 
    min-height: 200px; /* This part sucks */ 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 1px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
} 

DEMO