JS代码实现网页中的选项卡效果？
【实例名称】JS代码实现网页中的选项卡效果
【实例描述】选项卡是C/S(Client/Server)应用程序中常见的控件，但网页中并无此控件。本例学习使用JavaScript和CSS实现B/S(Browser/Server)应用程序的选项卡。
【实例代码】html xmlns=http://www。w3。org/1999/xhtml head title标题页-学无忧（www。xue51。com）/titlestyle。conts{visibility:hidden}。 tab{border-top:solid thin #E0E0E0;border-right:solid thin...全部
【实例名称】JS代码实现网页中的选项卡效果
【实例描述】选项卡是C/S(Client/Server)应用程序中常见的控件，但网页中并无此控件。本例学习使用JavaScript和CSS实现B/S(Browser/Server)应用程序的选项卡。
【实例代码】html xmlns=http://www。w3。org/1999/xhtml head title标题页-学无忧（www。xue51。com）/titlestyle。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}。
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}。
selTab{border-left:solid thin white;border-top:solid thin white;border-right:solid thin black;font-weight:bold;text-align:center}/stylescript language=JavaScriptfunction 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();}
默认显示选项卡1function 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;}}/script/headbody BGCOLOR=#c0c0c0 onclick=changeTabs() onload=init()div STYLE=position:absolute; top:20; height:350; width:500; left:65; border:none thin graytable STYLE=width:600; height:350 CELLPADDING=0 CELLSPACING=0 bgcolor=c0c0c0trtd ID=t1 CLASS=selTab HEIGHT=25选项 1/tdtd ID=t2 CLASS=tab选项 2/tdtd ID=t3 CLASS=tab选项 3/tdtd ID=t4 CLASS=tab选项 4/tdtd ID=t5 CLASS=tab选项 5/tdtd ID=t6 CLASS=tab选项 6/tdtd ID=t7 CLASS=tab选项 7/td/trtrtd ID=t1base STYLE=height:2; border-left:solid thin white/tdtd ID=t2base STYLE=height:2; background-color:white/tdtd ID=t3base STYLE=height:2; background-color:white/tdtd ID=t4base STYLE=height:2; background-color:white/tdtd ID=t5base STYLE=height:2; background-color:white/tdtd ID=t6base STYLE=height:2; background-color:white/tdtd ID=t7base STYLE=height:2; background-color:white; border-right:solid thin white/td/trtrtd HEIGHT=* COLSPAN=7 ID=tabContentsSTYLE=border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin whitesample contents/td/tr/table/divdiv CLASS=conts ID=t1Contentsp align=centerTab1的内容 /p/divdiv CLASS=conts ID=t2Contentsp align=centerTab2的内容 /p/divdiv CLASS=conts ID=t3Contentsp align=centerTab3的内容 /p/divdiv CLASS=conts ID=t4Contentsp align=centerTab4的内容 /p/divdiv CLASS=conts ID=t5Contentsp align=centerTab5的内容 /p/divdiv CLASS=conts ID=t6Contentsp align=centerTab6的内容 /p/divdiv CLASS=conts ID=t7Contentsp align=centerTab7的内容 /p/div/body/html
【运行效果】【难点剖析】本例的重点是选项卡的样式和切换选项卡的事件。
其中使用了“window．event．srcElement”来获取选择的Tab。
【源码下载】为了JS代码的准确性，请点击：网页中的选项卡进行本实例源码下载。收起
