http://jsdo.it/goto_jp/ujJp

• タブ1

  タブ1の中身です。

  タブ1の中身です。タブ1の中身です。タブ1の中身です。タブ1の中身です。

   

• タブ2

  タブ2の中身です。

  タブ2の中身です。タブ2の中身です。タブ2の中身です。タブ2の中身です。

   

• タブ3

  タブ3の中身です。

  タブ3の中身です。タブ3の中身です。タブ3の中身です。タブ3の中身です。

   

<ul class=”tabs”>
<li>
<input name=”tab” id=”tab1″ type=”radio” checked />
<label for=”tab1″>タブ1</label>
<div class=”contents tab1″>
<p>タブ1の中身です。</p>
<p>タブ1の中身です。タブ1の中身です。タブ1の中身です。タブ1の中身です。</p>
</div>
</li>
<li>
<input name=”tab” id=”tab2″ type=”radio”/>
<label for=”tab2″>タブ2</label>
<div class=”contents tab2″>
<p>タブ2の中身です。</p>
<p>タブ2の中身です。タブ2の中身です。タブ2の中身です。タブ2の中身です。</p>
</div>
</li>
<li>
<input name=”tab” id=”tab3″ type=”radio”/>
<label for=”tab3″>タブ3</label>
<div class=”contents tab3″>
<p>タブ3の中身です。</p>
<p>タブ3の中身です。タブ3の中身です。タブ3の中身です。タブ3の中身です。</p>
</div>
</li>
</ul>

 

 body {
background: #eeeeee;
}
.tabs {
position: relative;
padding: 0;
}
.tabs li {
list-style: none;
display: inline-block;
}
.tabs input[type=radio] {
display: none;
}
.tabs label {
display: block;
cursor: pointer;
padding: 5px;
line-height: 20px;
background-color: #999999;
color: #ffffff;
}
.tabs label:hover {
background-color: #cccccc;
color: #000000;
}
.tabs input[type=radio]:checked + label {
background-color: #ffffff;
color: #000000;
}
.tabs .contents {
display: none;
position: absolute;
top:30px;
left: 0;
padding: 10px;
background: #ffffff;
}
.tabs input[type=radio]:checked + label + .contents{
display: block;
}