<!DOCTYPE html><htmllang=jadir="ltr"><head><metacharset="utf-8"><title></title></head><body><style>.tab1{background-color:orange;}.tab2{background-color:green;display:none;}.tab3{background-color:blue;color:white;display:none;}.tab{width:500px;height:100px;clear:left;}.tabcontrola{width:100px;display:block;float:left;border-radius:10px10px00;text-align:center;color:white;}.Tabcontrola:hover{text-decoration:underline;}.tabcontrola:nth-child(1),.tabbodydiv:nth-child(1){background-color:orange;}.tabcontrola:nth-child(2),.tabbodydiv:nth-child(2){background-color:green;}.tabcontrola:nth-child(3),.tabbodydiv:nth-child(3){background-color:blue;}</style><divid="Tabcontrol"class="tabcontrol"><ahref="#tabpage1"class="tab1"onclick="changeTab">タブ1</a><ahref="#tabpage2"class="tab2"onclick="changeTab">タブ2</a><ahref="#tabpage3"class="tab3"onclick="changeTab">タブ3</a></div><divid="tabbody"><divid="tabpage1"class="tab tab1"><p>これはタブ1です。</p></div><divid="tabpage2"class="tab tab2"><p>これはタブ2です。</p></div><divid="tabpage3"class="tab tab3"><p>これはタブ3です。</p></div></div></body><script type="text/javascript">vartabs=document.getElementById('Tabcontrol').getElementsByTagName('a');varpages=document.getElementById('tabbody').getElementsByTagName('div');functionchangeTab(){vartargetid=this.href.substring(this.href.indexOf('#')+1,this.href.length);for(vari=0;i<pages.length;i++){if(pages[i].id==targetid){pages[i].style.display="block";}else{pages[i].style.display="none";}}for(vari=0;i<tabs.length;i++){tabs[i].style.zIndex="0";}this.style.zIndex="10";returnfalse;}for(vari=0;i<tabs.length;i++){tabs[i].onclick=changeTab;}tabs[0].onclick();</script></html>↧
CSSとJavaScriptで３つのタブを作る方法
↧