JS学习进程（二）

选项卡

CSS：注意要点：显示隐藏的元素设置相对定位position:absolute

HTML:注意要点：使用<ul><li></li></ul>制作选项卡

JS:

var oLiLetter=document.getElementById("banner-letter").getElementsByTagName("li");
var oUlBannerA=document.getElementById("banner-a").getElementsByTagName("ul");

oLiLetter[0].className="lion"
oUlBannerA[0].style.display="block";
for(var i=0;i<oLiLetter.length;i++){
oLiLetter[i].index=i;
oLiLetter[i].onmouseover=function(){
for(var j=0;j<oLiLetter.length;j++){
oLiLetter[j].className=""
oUlBannerA[j].style.display="none";
}
this.className="lion"
oUlBannerA[this.index].style.display="block";
}
}

完美~~

记录一下自己的思路    有三个要点

要点一：关联选项和内容DIV，将I的值赋值给自定义属性index，保存变量，防止闭包

要点二：遍历整个li将li和ul的所有className清空，将ul设置为隐藏

要点三：this指向当前触发的对象，将关联起来的ul内容显示。