html性别选项卡,html选项卡

标题页

.conts{visibility:hidden}

.tab{

border-top:solid thin #E0E0E0;

border-right:solid thin gray;

border-left:solid thin #E0E0E0;

font-family:Verdana;

font-size:10pt;

text-align:center;

font-weight:normal;

cursor:pointer;

}

.selTab{

border-left:solid thin white;

border-top:solid thin white;

border-right:solid thin black;

font-weight:bold;

text-align:center}

.conts {visibility:hidden}

.tab{

border-top:solid thin #E0E0E0;

border-right:solid thin gray;

border-left:solid thin #E0E0E0;

font-family:Verdana;

font-size:10pt;

text-align:center;

font-weight:normal

}

function public_Labels(label1, label2, label3, label4, label5, label6, label7){

t1.innerText = label1;

t2.innerText = label2;

t3.innerText = label3;

t4.innerText = label4;

t5.innerText = label5;

t6.innerText = label6;

t7.innerText = label7;

}

//切换选项卡时显示选项卡的内容

function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

t1Contents.innerHTML = contents1;

t2Contents.innerHTML = contents2;

t3Contents.innerHTML = contents3;

t4Contents.innerHTML = contents4;

t5Contents.innerHTML = contents5;

t6Contents.innerHTML = contents6;

t7Contents.innerHTML = contents7;

init();

}

//默认显示选项卡1

function init(){

tabContents.innerHTML = t1Contents.innerHTML;

}

//更换选项卡时的方法

var currentTab;

var tabBase;

var firstFlag = true;

function changeTabs(){

if(firstFlag == true){

currentTab = t1;

tabBase = t1base;

firstFlag = false;

}

//当用户单击选项卡时，修改样式及内容

if(window.event.srcElement.className == "tab")

{

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";

tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}

}

选项 1	选项 2	选项 3	选项 4	选项 5	选项 6	选项 7
sample contents

Tab1的内容

Tab2的内容

Tab3的内容

Tab4的内容

Tab5的内容

Tab6的内容

Tab7的内容