& lthtml xmlns = " http://www . w3 . org/1999/XHTML " & gt；
& lthead & gt
& ltmeta http-equiv = " Content-Type " Content = " text/html；charset=gb2312" />
& lttitle & gt簡明選項卡
& ltstyle type="text/css " >
& lt！-
body，div，ul，li{
邊距:0自動；
填充:0；
}
正文{
字體:12px“宋體”；
文本對齊:居中；
}
答:鏈接{
顏色:# 00F
文字-裝飾:無；
}
答:已訪問{
顏色:# 00F
文字-裝飾:無；
}
答:懸停{
顏色:# c00
文本裝飾:下劃線；
}
ul{
列表樣式:無；
}
。主要{
明確:兩者都有；
填充:8px
文本對齊:居中；
}
/*第壹種形式*/
#tabs0 {
高度:200px
寬度:400px
邊框:1px實心# cbcbcb
背景色:# f2f 6 FB；
}
.菜單0{
寬度:400px
}
. menu0 li{
顯示:塊；
浮動:左；
填充:4px 0；
寬度:100 px；
文本對齊:居中；
光標:指針；
背景:# FFFFff
}
. menu0 li.hover{
背景:# f2f 6 FB；
}
#main0 ul{
顯示:無；
}
#main0 ul.block{
顯示:塊；
}
/*第二種形式*/
#tabs1{
文本對齊:左對齊；
寬度:400px
}
. menu1box{
位置:相對；
溢出:隱藏；
高度:22px
寬度:400px
文本對齊:左對齊；
}
#menu1{
位置:絕對；
top:0；
左:0；
z指數:1；
}
#menu1 li{
浮動:左；
顯示:塊；
光標:指針；
寬度:72px
文本對齊:居中；
行高:21px；
身高:21px；
}
#menu1 li.hover{
背景:# fff
border-left:1px solid # 333；
border-top:1px solid # 333；
border-right:1px solid # 333；
}
. main1box{
明確:兩者都有；
margin-top:-1px；
邊框:1px實心# 333；
身高:181px；
寬度:400px
}
#main1 ul{
顯示:無；
}
#main1 ul.block{
顯示:塊；
}
/*第三種形式*/
. menu2box{
位置:相對；
溢出:隱藏；
高度:22px
寬度:400px
文本對齊:左對齊；
背景:# FFFFff
}
#標簽2 {
高度:200px
寬度:400px
邊框:1px實心# cbcbcb
背景色:# f2f 6 FB；
}
#提示2{
位置:絕對；
top:0；
左:0；
高度:22px
行高:22px
z指數:0；
寬度:100 px；
背景:# f2f 6 FB；
}
#菜單2{
位置:絕對；
top:0；
左:0；
z指數:1；
}
#menu2李{
顯示:塊；
浮動:左；
填充:4px 0；
寬度:100 px；
文本對齊:居中；
光標:指針；
}
-& gt；
& lt/style & gt；
& lt腳本& gt
& lt！-
/*更改第壹個表單和第二個表單的顯示樣式*/
函數setTab(m，n){
var tli = document . getelementbyid(" menu "+m)。getElementsByTagName(" Li ")；
var mli = document . getelementbyid(" main "+m)。getElementsByTagName(" ul ")；
for(I = 0；我& lttli.lengthi++){
tli[i]。className=i==n？" hover ":" "；
mli[i].style.display=i==n？“阻止”:“無”；
}
}
/*第三種形式使用背景層來定位*/
Var m3={0:" "，1:"評論內容"，2:"技術內容"，3:"評論內容" }
函數nowtab(m，n){
如果(n！= 0 & amp& ampm3[0]= = " ")m3[0]= document . getelementbyid(" main 2 ")。innerHTML
document . getelementbyid(" tip "+m). style . left = n * 100+' px '；
document.getElementById("main2 ")。innerHTML = m3[n]；
}
//-& gt；
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& lt！-第壹種形式-& gt；
& ltdiv id="tabs0 " >
& ltul class="menu0" id="menu0 " >
& lt李onclick="setTab(0，0)" class = " hover " & gt；新聞
& lt李onclick="setTab(0，1)" & gt；評論
& lt李onclick="setTab(0，2)" & gt；技術
& lt李onclick="setTab(0，3)" & gt；評論
& lt/ul & gt；
& ltdiv class="main" id="main0 " >
& ltul class="block " >& lt李& gt新聞列表
& ltul & gt& lt李& gt註釋列表
& ltul & gt& lt李& gt技術列表
& ltul & gt& lt李& gt註釋列表
& lt/div & gt；
& lt/div & gt；
& lt！-第二種形式-& gt；
& ltdiv id="tabs1 " >
& ltdiv class="menu1box " >
& ltul id="menu1 " >
& lt李class = " hover " onmouseover = " setTab(1，0)" & gt；& lta href = " # " & gt新聞
& lt李onmouseover="setTab(1，1)" & gt；& lta href = " # " & gt評論
& lt李onmouseover="setTab(1，2)" & gt；& lta href = " # " & gt技術
& lt李onmouseover="setTab(1，3)" & gt；& lta href = " # " & gt評論
& lt/ul & gt；
& lt/div & gt；
& ltdiv class="main1box " >
& ltdiv class="main" id="main1 " >
& ltul class="block " >& lt李& gt新聞列表
& ltul & gt& lt李& gt評論列表
& ltul & gt& lt李& gt技術列表
& ltul & gt& lt李& gt評論列表
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& lt！-第三種形式-& gt；
& ltdiv id="tabs2 " >
& ltdiv class="menu2box " >
& ltdiv id="tip2 " >& lt/div & gt；
& ltul id="menu2 " >
& ltLi class = " hover " onmouseover = " nowtab(2，0)" & gt；& lta href = " # " & gt新聞
& lt李onmouseover="nowtab(2，1)" & gt；& lta href = " # " & gt評論
& lt李onmouseover="nowtab(2，2)" & gt；& lta href = " # " & gt技術
& lt李onmouseover="nowtab(2，3)" & gt；& lta href = " # " & gt評論
& lt/ul & gt；
& lt/div & gt；
& ltdiv class="main" id="main2 " >
新聞內容
& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；