上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 タブ表示スクリプト。
 耳の部分をクリックすると表示が切り替わります。(作者、若干理解せずにやっている部分があります。不具合出たらごめんなさい)
 スタイルシート部分は、スタイルシートファイルに記述するとSEO的に良いです。
 スクリプト部分も外部ファイル化すると、さらにイイです。
 すべてがスクリプトに収まるので、検索エンジンは内容を読み取りません(ほぼ無視します)広告表示などに最適。



見本






概要

(1)t[0]='~','~'; という、配列部分に、「タブ名」、「内容(HTML可)」を入れます。
(2)連番数を自由に増やしたり減らしたり出来ます。
(3)かすかに丸角。




タブスクリプトひな形

<div id="sltab"></div>
<script type="text/javascript">
(function(){
var t=new Array();
//配列に、「ボタン名」 , 「内容(HTML可)」の順に記述します。
t[0]=new Array('ボタン0','内容0');
t[1]=new Array('ボタン1','内容1');
t[2]=new Array('ボタン2','内容2');
t[3]=new Array('ボタン3','内容3');

var l=t.length-1;
var tb=document.getElementById("sltab");
var HTML="";

//HTML構築
HTML +='<div class="sltabupper">';
for (i=0;i<=l;i++){
	HTML +='<div class="sltabbody"><div class="sltabline"></div><div id="sltabbutton'+ i +'" class="sltabbutton">';
	HTML +=t[i][0];
	HTML +='</div></div>';
	}
HTML +='<br clear="all" /></div><div class="sltabconteinar-outer">';
for (i=0;i<=l;i++){
	HTML +='<div id="sltabconteinar'+i+'" class="sltabconteinar-body">';
	HTML +=t[i][1];
	HTML +='</div>';
	}
HTML +='</div>';
tb.innerHTML=HTML;

//初期
var bg=document.getElementById("sltabbutton0");
bg.style.backgroundColor="#222222";
bg.style.color="#ffffff";
for (i=1;i<=l;i++){
	document.getElementById("sltabconteinar"+i).style.display="none";
	}

//リセット
function reset(){
for (i=0;i<=l;i++){
	var re=document.getElementById("sltabbutton"+i);
	var re2=document.getElementById("sltabconteinar"+i);
	re.style.backgroundColor="#ffffff";
	re.style.color="#222222";
	re2.style.display="none";
	}
}//reset

//クリック
for (i=0;i<=l;i++){
	var cl=document.getElementById("sltabbutton"+i);
	var cl2=document.getElementById("sltabconteinar"+i);
	(function(_cl,_cl2){
		_cl.onclick=function(){
		reset();
		_cl.style.backgroundColor="#222222";
		_cl.style.color="#ffffff";
		_cl2.style.display="block";
		}
	})(cl,cl2);
}//for
})();
</script>

<style>
#sltab{
	line-height:1;
	}
.sltabbody{
	margin-left:2px;
	float:left;
	}
.sltabline{
	margin:0;
	font-size:1px;
	height:1px;
	background:#444;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	}
.sltabbutton{
	border-left:1px solid #444;
	border-right:1px solid #444;
	padding:2px 10px;
	font-size:12px;
	cursor:pointer;
	}
.sltabconteinar-outer{
	clear:both;
	border-top:2px solid #444;
	padding:5px;
	}
.sltabconteinar-body{
	line-height:1.4;
	}
</style>




 メニューページはこちらから。 →簡易スクリプトひな形集
このエントリーをはてなブックマークに追加
Tue.07.13.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。