"HTML5" tab

：

Html:

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "Utf-8" />        <title></title>        <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css" />        <Scripttype= "Text/javascript"language= "JavaScript"src= "Js/script.js"></Script>    </Head>    <Body>        <Divclass= "Body">            <Divclass= "box"ID= "box">                <ulclass= "title">                    <ahref="#"><LiID= "T1"onclick= "Oclick (' T1 ')">News</Li></a>                    <ahref="#"><LiID= "T2"onclick= "Oclick (' T2 ')">Magazine</Li></a>                    <ahref="#"><LiID= "T3"onclick= "Oclick (' T3 ')">Animation</Li></a>                    <ahref="#"><LiID= "T4"onclick= "Oclick (' T4 ')">Music</Li></a>                </ul>                <DivID= "D1"style= "Display:none">                                    </Div>                <DivID= "D2"style= "Display:none">                                    </Div>                <DivID= "D3"style= "Display:none">                                    </Div>                <DivID= "D4"style= "Display:none">                                    </Div>            </Div>        </Div>    </Body></HTML>

Css:

    *{padding:0;margin:0;}. Box. Title,.box. title Li{padding:0;margin:0;}. Body{width:1200px;Height:1000px;Box-shadow:0 0 5px Gray;margin:0 Auto;Border:1px solid #fff;}. Box{width:820px;Height:366px;Box-shadow:0 0 5px Gray;margin:200px Auto;Border:1px solid #fff;}. Box. Title{List-style:None;text-align:Center;}. box. Title Li{width:80px;Height:40px;Font:12px/40px "Microsoft Ya Hei";float: Left;background:Ghostwhite;Border:1px solid #f2f2f2;}. Box. Title A Li:hover{background:#F2F2F2}. Box Div{width:820px;Height:320px;Margin-top:46px;}

Js:

//This is glunefish js function.    functionOclick (x) {varobj =document.getElementById (x); Obj.style.border= ' None '; Obj.style.background= ' #fff '; varTtotal = [' T1 ', ' T2 ', ' T3 ', ' T4 '];  for(vari=0;i<4;i++){            if(Ttotal[i] = =x)                {Boxchange (i); Ttotal.splice (i,1); Continue;} }         for(vari=0;i<ttotal.length;i++){            varobj =document.getElementById (Ttotal[i]); Obj.style.border= ' 1px solid #f2f2f2 '; Obj.style.background= ' Ghostwhite ';} }    functionBoxchange (x) {vardlist = [' D1 ', ' D2 ', ' D3 ', ' D4 '];  for(vari=0;i<dlist.length;i++) {document.getElementById (Dlist[i]). Style.display= ' None '}            vardiv = document.getElementById (dlist[x]). style.display= ' Block '; } onload=function() {Oclick (' T1 ');}

"HTML5" tab