<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>用CSS+JavaScript打造网页中的选项卡</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="Purple Endurer"> <META NAME="Keywords" CONTENT="CSS,JavaScript,网页制作,选项卡"> <META NAME="Description" CONTENT="用CSS+JavaScript打造网页中的选项卡"> <style> #tabmenu { color: #000; border-bottom: 1px solid #FF7E00; margin: 5px 0px 0px 0px; padding: 0px; z-index: 1; padding-left: 10px; }#tabmenu li { display: inline; overflow: hidden; list-style-type: none; margin: 5px; }#tabmenu a, a.active { color: #000; background: #fff; border: 1px solid #FF7E00; padding: 2px 5px 0px 5px; margin: 0; text-decoration: none; }#tabmenu a.active { background: #fff4d4; border-bottom: 3px solid #fff4d4; }#tabmenu a:hover { background: #fff4d4; }#tabmenu a.active:hover { background: #fff4d4; color: #000; }.activecontent { text-align: justify; background: #fff4d4; padding: 2px; border: 1px solid #FF7E00; border-top: none; z-index: 2; }.activecontent a { text-decoration: none; color: #00f; }.activecontent a:hover { text-decoration: underline; }.activecontent ol { margin: 5px 5px 5px 25px !important; margin: 5px 5px 5px 30px; padding: 0px; }.activecontent li { margin: 0px; padding: 0px; }.hiddencontent { display: none; } </style> </HEAD><BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var TabArray = new Array(); TabArray[0] = new Array("endurer@blogchina", "http://endurer.blogchina.com"); TabArray[1] = new Array("endurer@blogcn", "http://endurer.blogcn.com"); TabArray[2] = new Array("endurer@xoyo", "http://blog.xoyo.com/endurer"); TabArray[3] = new Array("endurer@$inablog", "http://blog.sina.com.cn/u/1234333073"); g_tabCount = TabArray.length; /*writeTab(),writeContents(), selTab()，各tab的内容分别独立用一个<iframe>*/ function writeTab(tabIndex) { if (0==g_tabCount) { document.write('空'); return; } if (tabIndex >= g_tabCount) { tabIndex = g_tabCount-1; } document.write('<ul id="tabmenu">'); for (i = 0; i < g_tabCount; i++) { document.write('<li><a id="tabTab'); document.write(i); document.write('" οnclick="selTab('); document.write(i); document.write(');return false;" class="'); document.write(i == tabIndex ?"active" : ""); document.write('" href="#">'); document.write(TabArray[i][0]); document.write('</a></li>'); } document.write("</ul>"); }function writeContents(tabIndex, height) { if (0==g_tabCount) { document.write('空'); return; } if (tabIndex >= g_tabCount) { tabIndex = g_tabCount-1; } for (i = 0; i < g_tabCount; i++) { document.write('<div id="tabContent'); document.write(i); document.write('" class="'); document.write(i == tabIndex ?"active" : "hiddencontent"); document.write('">'); document.write('<iframe src="'); document.write(TabArray[i][1]); document.write('" width="100%" height="'); document.write(height); document.write('" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>'); document.write("</div>"); } }function selTab(tabIndex) { for (i = 0; i < g_tabCount; i++) { tab = document.getElementById("tabTab" + i); content = document.getElementById("tabContent" + i); if (i == tabIndex) { tab.className = "active"; content.className = "activecontent"; } else { tab.className = ""; content.className = "hiddencontent"; } } }/*writeTab1(),writeContents1(), selTab1()，各tab的内容共用一个<iframe>*/ function writeTab1(tabIndex) { if (0==g_tabCount) { document.write('空'); return; } if (tabIndex >= g_tabCount) { tabIndex = g_tabCount-1; } document.write('<ul id="tabmenu">'); for (i = 0; i < g_tabCount; i++) { document.write('<li><a id="tabTab'); document.write(i); document.write('" οnclick="selTab1('); document.write(i); document.write(');return false;" class="'); document.write(i == tabIndex ?"active" : ""); document.write('" href="#">'); document.write(TabArray[i][0]); document.write('</a></li>'); } document.write("</ul>"); }function writeContents1(tabIndex, height) { if (0==g_tabCount) { document.write('空'); return; } if (tabIndex >= g_tabCount) { tabIndex = g_tabCount-1; } var strHTML = '<iframe src="'; strHTML += TabArray[tabIndex][1]; strHTML += '" width="100%" height="'; strHTML += height; strHTML += '" style="border-left: 1 solid #FF7E00;border-right: 1 solid #FF7E00; border-bottom: 1 solid #FF7E00"></iframe>'; document.all("idTabContent").innerHTML = strHTML; }function selTab1(tabIndex) { for (i = 0; i < g_tabCount; i++) { tab = document.getElementById("tabTab" + i); tab.className = (i == tabIndex ? "active": ""); } writeContents1(tabIndex); } //writeTab(0); //writeContents(0); writeTab1(0); //--> </SCRIPT><div ID="idTabContent"></div> <SCRIPT LANGUAGE="JavaScript"> <!-- writeContents1(0, 300); //--> </SCRIPT> </div> </BODY> </HTML>
