menu
menu

JavaScriptでタブレイアウト | 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

JavaScriptでタブレイアウト

  • Labs

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>タブ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>');
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');
return false;
}
}else if(tabobj[i].className == 'tab2'){
tabobj[i].onclick = function(){
tab_h('tab2h','url(th1.png)');
tab_b('tab2b');
return false;
}
}else if(tabobj[i].className == 'tab3'){
tabobj[i].onclick = function(){
tab_h('tab3h','url(th1.png)');
tab_b('tab3b');
return false;
}
}else if(tabobj[i].className == 'tab4'){
tabobj[i].onclick = function(){
tab_h('tab4h','url(th1.png)');
tab_b('tab4b');
return false;
}
}else if(tabobj[i].className == 'tab5'){
tabobj[i].onclick = function(){
tab_h('tab5h','url(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(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';
}
}

関連リンク

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

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

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

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

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