CSSのみで簡単にタブ切り替えを作成する方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんばんは!
 
今回はライトなのですが。
CSSのみでタブ切り替えを実施する方法です。
 
かなり簡単な方法だと思います。
では…

CSS


#tabmenu{
padding:0px;
margin:0px;
color:#333;
font-size: 11px;
width:500px;
position:relative;
}

#tabmenu div#tab{
position: absolute;
top:0px;
left:0px;
}

#tabmenu div#tab a{
float: left;
height: 40px;
line-height: 40px;
text-align: center;
width: 100px;
display: block;
text-decoration:none;
color:#333;
background:#eee;
}

#tabmenu div#tab a:hover{
background:#000;
color:#fff;
}

div#tab_contents{
width:500px;
overflow:
hidden;clear:both;
}
div#tab_contents ul{
width:2500px;
padding:0px;
margin:0px;
}
div#tab_contents ul li{
float: left;
width:460px;
list-style-type:none;
padding:60px 20px 20px 20px;
background:#e2e2e2;
}

HTML


<div id="tabmenu">
<div id="tab">
<a href="#tab1">TAB1</a>
<a href="#tab2">TAB2</a>
<a href="#tab3">TAB3</a>
<a href="#tab4">TAB4</a>
<a href="#tab5">TAB5</a>
</div>
<div id="tab_contents">
<ul>
<li id="tab1" name="tab1">"No1" this is tab container.you can write anythig.</li>
<li id="tab2" name="tab2">"No2" this is tab container.you can write anythig.</li>
<li id="tab3" name="tab3">"No3" this is tab container.you can write anythig.</li>
<li id="tab4" name="tab4">"No4" this is tab container.you can write anythig.</li>
<li id="tab5" name="tab5">"No5" this is tab container.you can write anythig.</li>
</ul>
</div>
</div>

ページ内リンクで各タブへと飛ばしています。
 
jQueryのスムーズスクロールと組み合わせるとスライダーにも使えますね♪

DEMO