Problems with the TAB authoring process:
1, put all the input and div should be dropped in a large div
2, give the button to set a selected color is set by the class, through the row style to let the default div display
3, each Click to create a change to use the For loop to clear the previous demo, set classname empty, display is None
4. The use of this. I wrote Obtn[i], this time should be involved in the scope of I problem, so has been an error. This is the button that refers to the current event.
5, the following corresponding Div is to use the JS button to set an index value
<!DOCTYPE HTML>
<HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>#div1 Div{Height:200px;width:100px;background:Grey;Border:1px solid Red;Display:None; }. Active{background:Yellow; } </style> <Scripttype= "Text/javascript">window.onload= function (){ varOdiv=document.getElementById ('Div1'); varobtn=Odiv.getelementsbytagname ('input'); varODiv2=Odiv.getelementsbytagname ('Div'); for(varI=0; I<Obtn.length;i++) {Obtn[i].index=i; Obtn[i].onclick= function () { for(varI=0; I<Obtn.length;i++) {Obtn[i].classname= "'; Odiv2[i].style.display= 'None'; } This. ClassName= 'Active'; odiv2[ This. Index].style.display= 'Block'; }; } }; </Script></Head><Body><DivID= "Div1"><inputclass= "Active"type= "button"value= "Zhaosheng"/><inputtype= "button"value= "Jiaoyu"/><inputtype= "button"value= "Chuguo"/><inputtype= "button"value= "Peixun"/><Divstyle= "Display:block">Zhaosheng</Div><Div>Jioayu</Div><Div>Chuguo</Div><Div>Peixun</Div></Div></Body></HTML>
Making of Tabs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
