【Labs】JavaScriptでタブレイアウト

こんにちは（・∀・）

JavaScriptを使用したサンプルをご紹介します。今回はタブレイアウトです。

JavaScriptでタブレイアウト

HTML

<div id="tab">
<div id="tabhead">
<div id="tab1h"><a href="#tab1" class="tab1">TAB1</a></div>
<div id="tab2h"><a href="#tab2" class="tab2">TAB2</a></div>
<div id="tab3h"><a href="#tab3" class="tab3">TAB3</a></div>
<div id="tab4h"><a href="#tab4" class="tab4">TAB4</a></div>
<div id="tab5h"><a href="#tab5" class="tab5">TAB5</a></div>
<!--tabhead--></div>
<div id="tabbody">
<div id="tab1b">
<p>タブ１です。</p>
</div>
<div id="tab2b">
<p>タブ２です。<br>タブ２です。<br></p>
</div>
<div id="tab3b">
<p>タブ３です。<br>タブ３です。<br>タブ３です。</p>
</div>
<div id="tab4b">
<p>タブ４です。<br>タブ４です。<br>タブ４です。<br>タブ４です。</p>
</div>
<div id="tab5b">
<p>タブ５です。<br>タブ５です。<br>タブ５です。<br>タブ５です。<br>タブ５です。</p>
</div>
<!--tabbody--></div>
<!--tab--></div>

CSS

#tab {
  width: 320px;/*横幅はここで設定します。100%にすれば可変になります。*/
  min-width: 320px;
  text-align: left;
  margin: 0 auto;
}
/*tabhead*/
#tab1h {
  float: left;
  width: 20%;
  height: 30px;
  background: url(img/th1.png) repeat-x bottom left;
}
#tab2h,
#tab3h,
#tab4h,
#tab5h {
  float: left;
  width: 20%;
  height: 30px;
  background: url(img/th2.png) repeat-x bottom left;
}
#tabhead a,
#tabhead a:link,
#tabhead a:visited {
  display: block;
  text-align: center;
  color: #111;
  font-size: 14px;
  line-height: 2.2;
  text-decoration: none;
  outline: none;
}
#tabhead a:hover,
#tabhead a:active {
  color: #777;
  text-decoration: none;
}
/*tabbody*/
#tab1b,
#tab2b,
#tab3b,
#tab4b,
#tab5b {
  overflow: hidden;
  background: #eef2fe;
  padding: 10px;
  /*縦幅を固定にしたいときはここで設定します。*/
}

JavaScript

document.write('');
function tabChange(){
var tabobj = document.getElementsByTagName('a');
for(var i=0; i < tabobj.length; i++){
if(tabobj[i].className == 'tab1'){
tabobj[i].onclick = function(){
tab_h('tab1h','url(img/th1.png)');
tab_b('tab1b');
return false;
}
}else if(tabobj[i].className == 'tab2'){
tabobj[i].onclick = function(){
tab_h('tab2h','url(img/th1.png)');
tab_b('tab2b');
return false;
}
}else if(tabobj[i].className == 'tab3'){
tabobj[i].onclick = function(){
tab_h('tab3h','url(img/th1.png)');
tab_b('tab3b');
return false;
}
}else if(tabobj[i].className == 'tab4'){
tabobj[i].onclick = function(){
tab_h('tab4h','url(img/th1.png)');
tab_b('tab4b');
return false;
}
}else if(tabobj[i].className == 'tab5'){
tabobj[i].onclick = function(){
tab_h('tab5h','url(img/th1.png)');
tab_b('tab5b');
return false;
}
}
}
}
function addEvent(init){
if(window.addEventListener){
window.addEventListener("load",init, false);
}else if(window.attachEvent){
window.attachEvent("onload",init);
}
}
addEvent(function(){
tabChange();
tab_h('tab1h','url(img/th1.png)');
tab_b('tab1b');
});
function tab_h(tabh,tabi){
document.getElementById('tab1h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab2h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab3h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab4h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab5h').style.backgroundImage = 'url(img/th2.png)';
if(tabh){
document.getElementById(tabh).style.backgroundImage = tabi;
}
}
function tab_b(tabb){
document.getElementById('tab1b').style.display = 'none';
document.getElementById('tab2b').style.display = 'none';
document.getElementById('tab3b').style.display = 'none';
document.getElementById('tab4b').style.display = 'none';
document.getElementById('tab5b').style.display = 'none';
if(tabb){
document.getElementById(tabb).style.display = 'block';
}
}

Result

サンプルデモ

関連リンク

【Labs】CSSだけでサイズ可変・スマホ対応のタブレイアウト
【Labs】jquery.cookie.jsでサイズ可変・スマホ対応のタブレイアウト
【Labs】サイズ可変・スマホ対応のタブレイアウト
【Labs】クッキーを使ったタブレイアウト