用CSS+JavaScript打造网页中的选项卡
<!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('" onclick="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('" onclick="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>