封装的前端栏目选项卡
选项卡技术在前端设计中使用的频次很高,如果能有一套可以重复引用的精简版类最好不过。
页尾应用代码:
1 2 3 4 5 6 | <script type="text/javascript"> var tab1 = new Tab({id:"tab1",eventType:"mouseover",tag1:"a",tag2:"ul"}); tab1.init(); var tab2 = new Tab({id:"tab2",eventType:"click",tag1:"a",tag2:"ul"}); tab2.init(); </script> |
head部分引用代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> function Tab(obj){ this.obj = obj; } Tab.prototype.init = function(){ var $para = this.obj; var t1 = document.getElementById($para.id).getElementsByTagName($para.tag1); var t2 = document.getElementById($para.id).getElementsByTagName($para.tag2); this.$event = "on" + $para.eventType; t1[0].className = "current"; t2[0].style.display = "block"; for(var i=0;i<t1.length;i++){ t1[i][this.$event] = (function(index){ return function(){ for(var j=0;j<t1.length;j++){ t1[j].className = ""; t2[j].style.display = ""; } this.className = "current"; t2[index].style.display = "block"; } })(i); } } </script> |
实例效果下载地址:download
原文出自:http://www.men-ideal.com/archives/301
声明:原创文章-转载请注明Bruce|http://brucehan.com/本文链接地址: 封装的前端栏目选项卡
Keep talking: