完全用Js輸出的Tab選項卡_菜單導航特效

完全用Js輸出的Tab選項卡，具體一點來說，就是用JavaScript的innerHTML輸出的HTML代碼，這個要看用途了，一般我們不這樣弄，不過假如是在調用JS文件的時候，這個就派上用場了。

<title>完全用Js輸出的Tab選項卡</title>
<style type="text/css"> 
#div {
font-size:9pt;	
width:360px;
}
.div_01{
	border:1px solid #FFFFFF;
	background-color:#3366CC;
	width:60px;
	height:30px;
	float:left;
	color:#FFFFFF;
}
#div_02 {
	border:1px solid #000000;
	width:360px;
	height:300px;
}
</style>
<center>
<div id="div">
	<div class="div_01" id="d1" onclick="run(this.id)">asp</div>
	<div class="div_01" id="d2" onclick="run(this.id)">php</div>
	<div class="div_01" id="d3" onclick="run(this.id)">jsp</div>
	<div class="div_01" id="d4" onclick="run(this.id)">cgi</div>
	<div class="div_01" id="d5" onclick="run(this.id)">vc</div>
	<div class="div_01" id="d6" onclick="run(this.id)">圖像</div>
	<div id="div_02">初始化</div>
</div>
<Script type="text/JavaScript"> 
var oHTML=[
"<a href=\"#\">asp</a>",
"<a href=\"#\">php</a>",
"<a href=\"#\">jsp</a>",
"<a href=\"#\">cgi</a>",
"<a href=\"#\">vc</a>",
"<a href=\"#\"><center><img src=http://www.wf0088.com/images/logo.gif style='border:6 red groove;filter:fliph;'><span style='width:234;height:33;'></a>"]
function run(obj){
	for(i=1;i<=6;i++)
	{
		eval("document.getElementById(\"d"+i+"\").style.backgroundColor=\"#3366cc\"");
		document.getElementById(obj).style.backgroundColor="#FF0000";
	}
	document.getElementById("div_02").innerHTML=oHTML[obj.split("")[1]*1-1];
}
</Script>

所屬頻道：菜單導航特效/更新時間：2012-11-05

[收藏][報錯][返回列表]

相關菜單導航特效：

完全用Js輸出的Tab選項卡_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些