JavaScript+CSS实现tab

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>使用JavaScript实现的tab</title>

/*设置超链接样式*/

{

color: #5086a5;

text-decoration: none;

font-size: 12px;

}

a:hover

{

color: #5086a5;

text-decoration: underline;

font-size: 12px;

}

a:visited

{

color: #5086a5;

font-size: 12px;

}

/*整个tab层居中，宽度为600px*/

#tabDiv

{

width:600px;

margin:1em auto;

padding-bottom: 10px;

border-right: #b2c9d3 1px solid;

border-top: #b2c9d3 1px solid;

border-left: #b2c9d3 1px solid;

border-bottom: #b2c9d3 1px solid;

background: #ffffff;

}

/*tab头的样式*/

#tabsHead

{

padding-left: 0px;

height: 26px;

background-color: #e8f7fc;

font-size: 1em;

margin: 1px 0px 0px;

color: #5086a5;

line-height: 26px;

}

/*已选tab头（超链接）的样式*/

.curtab

{

padding-top: 0px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 10px;

border-right: #b2c9d3 1px solid;

font-weight: bold;

float: left;

cursor: pointer;

background: #ffffff;

}

/*未选tab头（超链接）的样式*/

.tabs

{

border-right: #c1d8e0 1px solid;

padding-top: 0px;

padding-right: 10px;

padding-bottom: 0px;

padding-left: 10px;

font-weight: normal;

float: left;

cursor: pointer;

}

{

font-size:9pt;

margin-left:20pt;

}

</style>

<!--

//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）

function showTab(tabHeadId,tabContentId)

{

//tab层

var tabDiv = document.getElementById("tabDiv");

//将tab层中所有的内容层设为不可见

//遍历tab层下的所有子节点

var taContents = tabDiv.childNodes;

for(i=0; i<taContents.length; i++)

{

//将所有内容层都设为不可见

if(taContents[i].id!=null && taContents[i].id != 'tabsHead')

{

taContents[i].style.display = 'none';

}

//将要显示的层设为可见

document.getElementById(tabContentId).style.display = 'block';

//遍历tab头中所有的超链接

var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');

for(i=0; i<tabHeads.length; i++)

{

//将超链接的样式设为未选的tab头样式

tabHeads[i].className='tabs';

}

//将当前超链接的样式设为已选tab头样式

document.getElementById(tabHeadId).className='curtab';

document.getElementById(tabHeadId).blur();

}

-->

</script>

</head>

<body>

</div>

<p>

红稣手，黄藤酒，<br />

满城春色宫墙柳。<br />

东风恶，欢情薄。<br />

一杯愁绪，几年离索。<br />

错、错、错。<br /><br />

春如旧，人空瘦，<br />

泪痕红浥鲛绡透。<br />

桃花落，闲池阁，<br />

山盟虽在，锦书难托。<br />

莫、莫、莫。<br />

</p>

</div>

<p>

驿外断桥边，寂寞开无主。<br />

已是黄昏独自愁，更著风和雨。<br />

无意苦争春，一任群芳妒。<br />

零落成泥碾作尘，只有香如故。<br />

</p>

</div>

</form>

</body>

</html>