タブでメイン画面表示を入れ替える
表示する画面を一旦「overflow:hidden」で非表示にしておき、タブ項目のページ内リンクで目的の画面を表示します。
HTML
<div id="tab">
<ul>
<li><a
href="#tab1">タブ項目１</a></li>
<li><a href="#tab2">タブ項目2</a></li>
<li><a href="#tab3">タブ項目3</a></li>
<li><a href="#tab4">タブ項目4</a></li>
<li><a href="#tab5">タブ項目5</a></li>
</ul>
</div>
<div
id="tab-contens">
<ul>
<li id="tab1">タブ1の内容</li>
<li
id="tab2">タブ2の内容</li>
<li id="tab3">タブ3の内容</li>
<li id="tab4">タブ4の内容</li>
<li id="tab5">タブ5の内容</li>
</ul>
</div>
「DIV ID tab」はタブ項目部分で、番号なしリストに設定し、タブのクリックで表示する内容をページ内リンクで参照します。リスト項目はCSSで横並べにしています。
「DIV ID tab-contens」は表示する内容部分で、番号なしリストに設定し、ページ内リンク先用のIDを指定しています。
CSS 1
番号付きリストを初期化します。
ul{
list-style-type:none;
margin:0;padding:0;
}
li{
margin:0;padding:0;
}
CSS 2 タブ部分
ページ幅700pxに5項目のタブを設定しています。タブ幅は％で設定しています。、「px」で設定しても構いませんが、％で指定しておくとページ幅の変更時に手間が省けます。
div#tab{
width:680px;
}
div#tab ul{
width:100%;
height: 40px;
}
div#tab ul li{
width:20%;
float:left;
height: 40px;
line-height: 40px;
text-align: center;
}
div#tab ul li a{
display:block;
line-height: 40px;
text-decoration:none;
background-color:#c00;
color:#fff;
border-right:1px solid #fff;
}
div#tab ul li a:hover{
background-color:#eee;
color:#333;
}
CSS 3 表示内容部分
DIVに「overflow:hidden」を指定し、ULの幅を極端に大きくして、一旦非表示にします。
div#tab-contens{
width:680px;
overflow:hidden;
clear:both;
}
div#tab-contens ul{
width:10000px;
}
div#tab-contens ul li{
float: left;
width:640px;
padding:20px;
background:#e2e2e2;
}