html实现选项卡功能,table标签+css代码实现选项卡效果(用)

演示效果截图

JavaScript代码

function secBoard(n)

{

for(i=0;i

secTable.cells[i].className="sec1";

secTable.cells[n].className="sec2";

for(i=0;i

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

CSS代码

td {

font-size: 12px;

color: #000000;

line-height: 150%;}

.sec1 {

background-color: #EEEEEE;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid #FFFFFF}

.sec2 {

background-color: #D4D0C8;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

font-weight: bold;}

.main_tab {

background-color: #D4D0C8;

color: #000000;

border-left:1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid gray;}

HTML代码

关于TBODY标记

关于cells集合

关于tBodies集合

关于display属性

height=120 id=mainTable class=main_tab>

www.865171.cn

1

www.865171.cn

2

www.865171.cn

3

www.865171.cn

4