【Labs】クッキーを使ったタブレイアウト

こんにちは（・∀・）

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

クッキーを使ったタブレイアウト

HTML

<div id="tab">
<div id="tabhead">
<div id="tab1h"><a href="javascript:void(0)" class="tab1">TAB1</a></div>
<div id="tab2h"><a href="javascript:void(0)" class="tab2">TAB2</a></div>
<div id="tab3h"><a href="javascript:void(0)" class="tab3">TAB3</a></div>
<div id="tab4h"><a href="javascript:void(0)" class="tab4">TAB4</a></div>
<div id="tab5h"><a href="javascript:void(0)" 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('');
tab_head = getCookie("tab_head");
if(tab_head == ""){
tab_head = "tab1h";
}else{
document.cookie = tab_head;
}
tab_body = getCookie("tab_body");
if(tab_body == ""){
tab_body = "tab1b";
}else{
document.cookie = tab_body;
}
function saveCookie(tab_h,tab_b){
setCookie("tab_head",tab_h);
setCookie("tab_body",tab_b);
document.cookie = tab_h;
document.cookie = tab_b;
}
function setCookie(key,val){
store = key+"="+escape(val)+";";
store += "expires=Fri, 31-Dec-2030 23:59:59;";
store += "path = /";
document.cookie = store;
}
function getCookie(key){
store = document.cookie+";";
hangar = store.indexOf(key,0);
if(hangar != -1){
store = store.substring(hangar,store.length);
start = store.indexOf("=",0);
end = store.indexOf(";",start);
return(unescape(store.substring(start+1,end)));
}
return("");
}
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');
saveCookie('tab1h','tab1b');
return false;
}
}else if(tabobj[i].className == 'tab2'){
tabobj[i].onclick = function(){
tab_h('tab2h','url(img/th1.png)');
tab_b('tab2b');
saveCookie('tab2h','tab2b');
return false;
}
}else if(tabobj[i].className == 'tab3'){
tabobj[i].onclick = function(){
tab_h('tab3h','url(img/th1.png)');
tab_b('tab3b');
saveCookie('tab3h','tab3b');
return false;
}
}else if(tabobj[i].className == 'tab4'){
tabobj[i].onclick = function(){
tab_h('tab4h','url(img/th1.png)');
tab_b('tab4b');
saveCookie('tab4h','tab4b');
return false;
}
}else if(tabobj[i].className == 'tab5'){
tabobj[i].onclick = function(){
tab_h('tab5h','url(img/th1.png)');
tab_b('tab5b');
saveCookie('tab5h','tab5b');
return false;
}
}
}
}
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';
}
}
function addEvent(init) {
if (window.addEventListener) {
window.addEventListener("load",init, false);
} else if (window.attachEvent) {
window.attachEvent("onload",init);
}
}
addEvent(function(){
tabChange();
tab_h(tab_head,'url(img/th1.png)');
tab_b(tab_body);
});

Result

サンプルデモ

関連リンク

【Labs】CSSだけでサイズ可変・スマホ対応のタブレイアウト
【Labs】jquery.cookie.jsでサイズ可変・スマホ対応のタブレイアウト
【Labs】サイズ可変・スマホ対応のタブレイアウト
【Labs】JavaScriptでタブレイアウト