JS Small example (tab)

Using JS to write a small example, to achieve a click on different tags appear different content:

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4     <MetaChaset= "Utf-8">5 <Script>6 functionnav (obj, x)7 {8     vara=Obj.parentNode.parentNode.children;9      for(varI=0; I<A.length;i++) {Ten A[i].style="border:1px Solid Red"; One     }  A Obj.parentNode.style="Border-bottom:white;"; -     varDiv=Document.getelementsbyname ("Div"); -      for(varI=0; I<Div.length;i++) { the Div[i].style.display="None"; - Div[x].style.display=""; -     }  - } + </Script> -     <style> + ul{List-style:None;} A ul Li{Border:1px solid Red;float: Left;padding:10px} at . Li{padding:0;width:200px;Margin-top:42px} - . Active{ - Border-bottom: White; -         } - a{text-decoration:None;} - Div{padding:100px} in Div H1{text-align:Center;} -     </style> to </Head> + <Body> -     <ul> the         <binclass= "Li"></Li> *         <Liclass= "Active"><ahref="#"onclick= "Nav (this, 0)">Navigation 1</a></Li> $         <Li><ahref="#"onclick= "NAV (this, 1)">Navigation 2</a></Li>Panax Notoginseng         <Li><ahref="#"onclick= "NAV (this, 2)">Navigation 3</a></Li> -         <Liclass= "Li"></Li> the     </ul> +     <DivID= "Div1"name= "Div"><H1>Content 1</H1></Div> A     <DivID= "Div2"name= "Div"style= "Display:none"><H1>Content 2</H1></Div> the     <DivID= "Div3"name= "Div"style= "Display:none"><H1>Content 3</H1></Div> + </Body> - </HTML>  $             

JS Small example (tab)