If it's an inductive trigger, choose onmouseover.
If it's a hit trigger, click on the onclick [replace the two with each other, you can change into a sensor or click at any time]
And if you want to have n sliding doors on a page
Just copy a set of ... Change the myTab0 into MYTAB1 myTab2 myTab3, etc... All can. or replace it with your own favorite name ... Of course mytab0_content0 This is also to change with!
Keep it for yourself.
<! 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> my sliding door </title> <style type=" text/css "> body{color: #000; font-family: "Song Body", Arial; font-size:12px; Background: #fff; Text-align:center; margin:0; }. ntab{Float:left; width:960px; margin:0 Auto; border-bottom:1px #AACCEE Solid; Background: #d5d5d5; Background-position:left; Background-repeat:repeat-y; margin-bottom:2px; }. Ntab. tabtitle{Clear:both; height:22px; Overflow:hidden; }. Ntab. Tabtitle ul{border:0; margin:0; padding:0; }. Ntab. Tabtitle li{Float:left; width:70px; Cursor:pointer; padding-top:4px; padding-right:0px; padding-left:0px; padding-bottom:2px; List-style-type:none; }. Ntab. Tabtitle. Active{background: #fff; border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid; . Ntab. Tabtitle. Normal{background: #EBF3FB; border:1px #AACCEE Solid;} . Ntab. tabcontent{Width:auto;background: #fff; margin:0px Auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; }. None {Display:none;} </style> <script type= "Text/javascript" > Function ntabs (thisobj,num) {if (Thisobj.classname = "active") re Turn var tabobj = thisObj.parentNode.id; var tablist = document.getElementById (tabobj). getElementsByTagName ("Li"); For (i=0 i <tabList.length; i++) {if (i = = Num) {thisobj.classname = "active"; document.getElementById (tabobj+ "_content" +i). Style.display = "block"; }else{tablist[i].classname = "normal"; document.getElementById (tabobj+ "_content" +i). Style.display = "None"; }} </script> </pead> <body> <div align= "center" > <!-- Tab 0 starts--> <div class= "Ntab" > <!--title start--> <div class= "Tabtitle" > <ul id= "my Tab0 "> <li class=" active "onmouseover=" Ntabs (this,0); " > All </li> <li class= "normal" onmouseover= "Ntabs (this,1);" > Log </li> <li class= "normal" onmouseover= "Ntabs (this,2);" > Consulting </li> <li class= "normal" onmouseover= "Ntabs (this,3);" > Albums </li> <li class= "normal" onmouseover= "Ntabs (this,4);" > Mall </li> <li class= "normal" onmouseover= "Ntabs (this,5);" > Community </li> </ul> </div> <!--content started--> <div class= "Tabcontent" > <div id= "Mytab0_content0" > </div> <div id= "Mytab0_content1" class= "None" >111</div> <div id= "Mytab0_content2" class= "None" >222</div> <div id= "Mytab0_content3" class= "None" >333&l t;/div> <div id= "Mytab0_content4 class=" None">444</div> <div id=" mytab0_content5 "class=" None ">555</div> </div> </div> <!--tab 0 End--> <!--tab 1 start--> <div class= "Ntab" Style=width:288px> <!--title Start--> <div class= "Tabtitle" > <ul id= "myTab1" > <li class= "active" onclick= "Ntabs (this,0);" >aaa</li> <li class= "normal" onclick= "Ntabs (this,1);" >bbb</li> <li class= "normal" onclick= "Ntabs (this,2);" >ccc</li> <li class= "normal" onclick= "Ntabs (this,3);" > Click </li> </ul> </div> <!--content start--> <div class= "Tabcontent" > <div id= "Mytab1_content0" > </div> <div id= "Mytab1_content1" class= "None" > </div> <div id= "Mytab1_content2" class= "None" > 222 </div> <div id= "Mytab1_content3" class= "None" > 333 </div> </div> </div> <!--tab 1 end--> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
