menu
menu

クッキーを使ったタブレイアウト | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook6
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0

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

  • Labs

JavaScript

こんにちは(・∀・)

 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>タブ1です。</p>
</div>
<div id="tab2b">
<p>タブ2です。<br>タブ2です。<br></p>
</div>
<div id="tab3b">
<p>タブ3です。<br>タブ3です。<br>タブ3です。</p>
</div>
<div id="tab4b">
<p>タブ4です。<br>タブ4です。<br>タブ4です。<br>タブ4です。</p>
</div>
<div id="tab5b">
<p>タブ5です。<br>タブ5です。<br>タブ5です。<br>タブ5です。<br>タブ5です。</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(th1.png) repeat-x bottom left;
}
#tab2h,
#tab3h,
#tab4h,
#tab5h {
	float: left;
	width: 20%;
	height: 30px;
	background: url(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('<style>');
document.write('#tab1b {display: block;}');
document.write('#tab2b,#tab3b,#tab4b,#tab5b {display: none;}');
document.write('</style>');
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(th1.png)');
tab_b('tab1b');
saveCookie('tab1h','tab1b');
return false;
}
}else if(tabobj[i].className == 'tab2'){
tabobj[i].onclick = function(){
tab_h('tab2h','url(th1.png)');
tab_b('tab2b');
saveCookie('tab2h','tab2b');
return false;
}
}else if(tabobj[i].className == 'tab3'){
tabobj[i].onclick = function(){
tab_h('tab3h','url(th1.png)');
tab_b('tab3b');
saveCookie('tab3h','tab3b');
return false;
}
}else if(tabobj[i].className == 'tab4'){
tabobj[i].onclick = function(){
tab_h('tab4h','url(th1.png)');
tab_b('tab4b');
saveCookie('tab4h','tab4b');
return false;
}
}else if(tabobj[i].className == 'tab5'){
tabobj[i].onclick = function(){
tab_h('tab5h','url(th1.png)');
tab_b('tab5b');
saveCookie('tab5h','tab5b');
return false;
}
}
}
}
function tab_h(tabh,tabi) {
document.getElementById('tab1h').style.backgroundImage = 'url(th2.png)';
document.getElementById('tab2h').style.backgroundImage = 'url(th2.png)';
document.getElementById('tab3h').style.backgroundImage = 'url(th2.png)';
document.getElementById('tab4h').style.backgroundImage = 'url(th2.png)';
document.getElementById('tab5h').style.backgroundImage = 'url(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(th1.png)');
tab_b(tab_body);
});

関連リンク

 CSSだけでサイズ可変・スマホ対応のタブレイアウト

 jquery.cookie.jsでサイズ可変・スマホ対応のタブレイアウト

 サイズ可変・スマホ対応のタブレイアウト

 JavaScriptでタブレイアウト

  • カテゴリー:Labs
  • facebook6
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0