【JavaScript】オリジナル生態の互換性のあるIE 6のラベルページ

3189 ワード

JavaScript IE スクリプトタb タブページ

タブページはよくあるものです.フレームの中にもよくあります.
しかし、すべての人がどのように書くかを知っているとは限りません.
このようによくないです.インターネットでコピーしたものを多くの時間で修正するより、自分で書くほうが早いです.
一、基本目標
以下のタブページを作成します.IE 8とGoogleブラウザの効果は以下の通りです.ほとんど違いがありません.
Googleブラウザ:
IE 8:
二、制作過程
1、まずシーンを配置し、一つのレイヤー内で:
レイヤー1~レイヤー4のハイパーリンクは一つのレイヤーで、それぞれのレイヤーの内容はそれぞれレイヤーで、デフォルトはレイヤー1の内容が表示されますが、レイヤー2~4はデフォルトでは表示されません.

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<div style="border:1px solid #000000;float:left;wight:10%;">
<div>
<a href="javascript:void(0)" onclick="div_tab(this)">  1</a>
<a href="javascript:void(0)" onclick="div_tab(this)">  2</a>
<a href="javascript:void(0)" onclick="div_tab(this)">  3</a>
<a href="javascript:void(0)" onclick="div_tab(this)">  4</a>
</div>
<div id="tabdiv1" style="display:block;">aaaaaaaaaaaaaaaaaaa</div>
<div id="tabdiv2" style="display:none;">bbbbbbbbbbbbbbbbb</div>
<div id="tabdiv3" style="display:none;">cccccccccccccccc</div>
<div id="tabdiv4" style="display:none;">dddddddddddddd</div>
</div>
<div style="clear:both"></div>
</body>
</html>

2、そして各ハイパーリンクはJavascriptスクリプト処理に伝達されます.スーパーリンクにJavascriptスクリプトを追加するなら、hrefを書かなければなりません.そして、このリンクはjavascript:void(0)を指します.その後、Oclick属性を加えます.その後、スーパーリンク全体を得たJavascriptは、ハイパーリンクのテキストから判断し、レイヤー1であれば、レイヤー1を表示し、他のすべてのレイヤーを隠すようにします.なお、aはvalue属性がないので、ここではテキストに基づいて判断します.

<script>
function div_tab(obj){
	switch(obj.innerHTML){
		case "  1":
			document.getElementById("tabdiv1").style.display="block";
			document.getElementById("tabdiv2").style.display="none";
			document.getElementById("tabdiv3").style.display="none";
			document.getElementById("tabdiv4").style.display="none";
			break;
		case "  2":
			document.getElementById("tabdiv1").style.display="none";
			document.getElementById("tabdiv2").style.display="block";
			document.getElementById("tabdiv3").style.display="none";
			document.getElementById("tabdiv4").style.display="none";
			break;
		case "  3":
			document.getElementById("tabdiv1").style.display="none";
			document.getElementById("tabdiv2").style.display="none";
			document.getElementById("tabdiv3").style.display="block";
			document.getElementById("tabdiv4").style.display="none";
			break;
		case "  4":
			document.getElementById("tabdiv1").style.display="none";
			document.getElementById("tabdiv2").style.display="none";
			document.getElementById("tabdiv3").style.display="none";
			document.getElementById("tabdiv4").style.display="block";
			break;			
	}
}
</script>

設計原則の開放-閉鎖原則javascript