HTML5 tab, html5 Tab

HTML5 tab, html5 Tab

 

:

 

 

HTML:

<! DOCTYPE html> 
 
CSS:
* {Padding: 0; margin: 0 ;}. box. title ,. box. title li {padding: 0; margin: 0 ;}. body {width: pixel PX; height: 1000px; box-shadow: 0 0 5px gray; margin: 0 auto; border: 1px solid # fff ;}. box {width: 820px; height: pixel PX; box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid # fff ;}. box. title {list-style: none; text-align: center ;}. box. title li {width: 80px; height: 40px; font: 12px/40px ""; float: left; background: ghostwhite; border: 1px solid # f2f2f2 ;}. box. title a li: hover {background: # F2F2F2 }. box div {width: 820px; height: 320px; margin-top: 46px ;}
 
JS:
// This is Glunefish js function.    function oclick(x){var obj = document.getElementById(x);        obj.style.border='none';        obj.style.background='#fff';        var ttotal = ['t1','t2','t3','t4'];        for(var i=0;i<4;i++){            if(ttotal[i] == x){                boxchange(i) ;                ttotal.splice(i,1);                continue;}            }        for(var i=0;i<ttotal.length;i++){            var obj = document.getElementById(ttotal[i]);            obj.style.border='1px solid #f2f2f2';            obj.style.background='ghostwhite';}        }    function boxchange(x){        var dlist = ['d1','d2','d3','d4'];        for(var i=0;i<dlist.length;i++){            document.getElementById(dlist[i]).style.display='none'}            document.getElementById(dlist[x]).style.display='block';    }    onload = function(){oclick('t1');}