JS Learning Summary----The classic small case of the tab

<!     DOCTYPE html>body,div,ul,li{margin:0; padding:0; Font-family:arial; Font-size:12px; } UL li{list-Style:none; } #tab {margin:10px auto0;        width:500px;            } #tab ul{position:relative;        top:1px; } #tab li{float: Left;            width:100px;            height:30px; Line-height:30px; Text-Align:center;            border:1px solid #ddd; Margin-right:10px;        Cursor:pointer; } #tab li.select{Border-Bottom:none; Background:-webkit-linear-gradient (top left, #cc0000, #00b3ee, #ffff00);            } #tab div{Display:none;            Clear:both;            height:100px; Line-height:100px; Text-Align:center;        border:1px solid #ddd;        } #tab div.select{Display:block; }    </style>/*tab Ideas: 1, mouse slide to a certain Li above, first let all the Li and div have no select style, then let the current have this select style 2, to manipulate who first get who 3, the development of a functional method to achieve our needs 4, to our Li-bound mouse to move up the event*/        varOtab = document.getElementById (' tab '); varOlis = otab.getelementsbytagname (' li '); varOdivs = otab.getelementsbytagname (' div ')        //nindex is our defined formal parameter, which represents the index of the currently selected element.        functionTabchange (nIndex) { for(vari = 0;i<olis.length;i++) {Olis[i].classname= ""; Odivs[i].classname= ""; } olis[nindex].classname= "Select"; Odivs[nindex].classname= "Select"; }        //after JS loading is complete (for loop also completed), we will manually trigger the onmouseover event, there is a closure problem         for(vari = 0;i<olis.length;i++) {Olis[i].index= I//in each cycle, the index of each li is defined on its own custom attribute indexOlis[i].onmouseover =function() {Tabchange ( This. Index)} }    </script></body>

Simplified version:

JS Learning Summary----The classic small case of the tab