DIV+CSS+JS analog tab, I this version, theoretically can add unlimited tab, and, you just tube content added line, do not need to change JS
Of course, you have to be a div.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>div+css+js analog tab</title> <style><!--body{margin:0;padding:0; Text-align:center; Background-color: #CCCCCC} a{text-decoration:none} #header ul{padding:0;margin:0} #header ul li{list-style:none; float : left} #header ul Li Span{display:inline-block; border:1px solid #000; cursor:hand;} #ccc {clear:both background-color: #009933; text-align:left} #ccc Div.cont{display:none}--></style> </ head> <body> <div id= "wrap" > <div id= "header" > <ul> <li><span> box 1111</span& gt;</li> <li><span> box 2222</span></li> <li><span> Box 3333</span></ li> <li><span> Box 4444</span></li&Gt </ul> </div> <div id= "CCC" > <div class= "cont" > here is the content of the Caesar. 111.. <br> here is the content of the Caesar. 111.. <br> here is the content of the Caesar. 111.. <br> </div> <div class= "cont" > here is Content Zacchaeus 222. <br> here is the content of the Caesar. 222.. <br> here is the content of the Caesar. 222.. <br> </div> <div class= "cont" > here is the content of the Caesar. 333.. <br> here is the content of the Caesar. 333.. <br> here is the content of the Caesar. 333.. <br> </div> <div class= "cont" > here is the content of the Caesar. 444.. <br> here is the content of the Caesar. 444.. <br> here is the content of the Caesar. 444.. <br> </div> </div> </div> <script type= "text/javascript" ><!--function $ (o) {return D Ocument.getelementbyid (o)} var ospan=$ (' header '). getElementsByTagName (' span '); var odiv=$ (' CCC '). getElementsByTagName (' div '); for (Var i=0;i<ospan.length;i++) {ospan[i].alt=i; Ospan[i].onclick=function () {var nid=parseint (this.alt); Hidall (); This.style.backgroundcolor= ' #fff '; odiv[nid].style.display= ' block '; } function Hidall () {for (Var i=0;i<odiv.length;i++) {Odiv[i].style.displaY= ' None '; Ospan[i].style.backgroundcolor= '; }//--></script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
