Home > Developer > Web Develop
Just a holiday home nothing, then looked at JS, in the original code, added an automatic switch
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>JS Toggle Effect</title> <style>Body{Background-color:#CCC; }. BTN{width:100px;Height:7px;Background-color: White;margin:10px;float: Left; }. Btn:first-of-type{Background-color:#008B8B; }div[id^= "Div"]{width:400px;Height:200px;Clear:both;Background-color:Red;margin:20px 0px;Display:None; }#div1{Display:Block; }#div2{Background-color:Yellow; }#div3{Background-color:Blue; } </style> </Head> <Body> <Divclass= "BTN"ID= "BTN1"onmouseover= "Changediv (1)"></Div> <Divclass= "BTN"ID= "BTN2"onmouseover= "Changediv (2)"></Div> <Divclass= "BTN"ID= "Btn3"onmouseover= "Changediv (3)"></Div> <DivID= "Div1"class= "Div">Div1</Div> <DivID= "Div2"class= "Div">Div2</Div> <DivID= "Div3"class= "Div">Div3</Div> <Script> varbtn=Document.getelementsbyclassname ("btn"); varDiv=Document.getelementsbyclassname ("Div"); varCount= 0; SetInterval (function(){ for (varI=0; I<Div.length;i++) {Div[i].style.display= "None"; Btn[i].style.backgroundcolor= " White"; } Div[count].style.display= "Block"; Btn[count].style.backgroundcolor= "#008B8B"; Count++; if(Count== 3) Count= 0; }, -); functionChangediv (ID) { for (varI=0; I<Div.length;i++) {Div[i].style.display= "None"; Btn[i].style.backgroundcolor= " White"; } div[id-1].style.display= "Block"; Btn[id-1].style.backgroundcolor= "#008B8B"; } </Script> </Body> <HTML>
JS Toggle Effect
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
