选项卡的简单原理实现
大家好,我是绅士扮演者,我喜欢将平时练的小案例拿出来与大家分享,也欢迎各位高人评论我的代码,提升技术,留下您宝贵的意见。有些地方可能没有注释,如果感觉有问题可以评论或私聊我都行。
平时小案例之--选项卡:
大家平常写选项卡应该都是通过设置class属性来通过动态添加或设置类名来实现内容的切换吧,我感觉那样的话要设置两套属性,不如直接动态设置CSS样式来控制内容的切换。下面是简单样式的源码(如有不好的地方,欢迎大家指正):
*{padding:0;margin: 0;} ul>li{list-style: none;} div{width: 400px;height: 300px;margin: 50px auto;border: 1px solid black;overflow: hidden;} .sm{float: left;width: 100px;height: 20px;border-bottom: 1px solid black;} .lg{width: 400px;height: 280px;background: green;margin-top: 20px;}
1 2 3 4 111111 22222 333333333 444444444 var sm=document.getElementsByClassName("sm"), lg=document.getElementsByClassName("lg"); for(var i=0;i sm[i].index=i; sm[i].onmouseover=function(){ for(var j=0;j lg[j].style.display="none"; }// console.log(this.index); this.style.backgroundColor="indianred"; lg[this.index].style.display="block"; } sm[i].onmouseout=function(){ this.style.backgroundColor="white";// lg[i].style.display="none"; } }当然,大体思想还是排他思想。
来源: http://www.cnblogs.com/Alanplayer/p/6747099.html