Home > Developer > JavaScript
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Options tab</title> <styletype= "Text/css"> *{margin:0;padding:0;}Button{width:40px;Height:30px;Line-height:30px;text-align:Center; }button.active{Background-color:Yellow}. Content{width:200px;Height:200px;Border:2px solid Red;Display:None; } </style></Head><Body> <Divclass= "wrapper"> <Buttonclass= "Active">11</Button> <Button>2</Button> <Button>3</Button> <Divclass= "Content"style= "Display:block">1111111111</Div> <Divclass= "Content">222222222</Div> <Divclass= "Content">3333</Div> </Div> <Scripttype= "Text/javascript"> varbtn=document.getElementsByTagName ('Button'); varcontent=Document.getelementsbyclassname ('content'); for (varI= 0; I<btn.length; I++) { //form a closed package (function(n) {Btn[n].onclick=function(){ //clears the current class of sibling elements for (varJ= 0; J<Btn.length; J++) {Btn[j].classname= ""; Content[j].style.display= "None"; } //Click Add Current Class This. ClassName= "Active"; Content[n].style.display= "Block"; }} (i))}</Script></Body></HTML>
：
JavaScript tab 2
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
