这两天遇到一个页面,同一个页面中同一个特效会用好多次,比如tab,比如轮播等。我又不想很不负责任的复制一遍代码,那样页面臃肿,自己心里也堵得慌。于是就想着把代码封装起来多次调用。
对于封装,只在公开课看过一个老师操作,自己也是啥也不懂得。
好歹最后在群里大神的指导下,一步一步的由简致难完善了。就上最后的版本吧,中间的迭代版,,也只是方便以后封装其他的话参考用。
最后的总结就是,一口吃不成个胖子,我前两天一直想的是封装起来,就从最难的代码开始捣鼓,捣鼓半天把自己都绕晕了。程序这回事,你思路比电脑清楚,首先就应该想的比电脑还简单,然后再绕线升级。一上来就打大boss的游戏,什么装备和技能都还没攒,你不死谁死。
html:
<div class="aTapWrap aboutA_P" id="aTapWrap"> <ul id="aTapHeadWrap"> <li class="tapActiveLi">关于我们</li> <li> 联系方式</li> <li> 意见建议</li> </ul> <div class="aTapWrapS" id="aTapWrapS"> <div> <p>文字1</p> </div> <div class="hide"> <p>文字2</p> </div> <div class="hide"> <p>文字3</p> </div> </div> </div> <div class="aTapWrap aboutA_P" id="aTapWrap2"> <ul id="aTapHeadWrap2"> <li class="tapActiveLi">关于我们</li><li> 联系方式</li><li> 意见建议</li> </ul> <div class="aTapWrapS" id="aTapWrapS2"> <div> <p>文字1</p> </div> <div class="hide"> <p>文字2</p> </div> <div class="hide"> <p>文字3</p> </div> </div> </div>
js:
<script type="text/javascript"> window.onload = function(){ function For(c,d){ for(var i = 0; i < c.length; i++) { c[i].index = i; c[i].onclick = function(e) { for(var j = 0; j < c.length; j++) { c[j].className = ""; d[j].className = "hide"; } this.className = "tapActiveLi"; d[this.index].className = ""; } } } function tab(a,b){ var aLi = document.getElementById(a).getElementsByTagName(‘li‘); var aDiv = document.getElementById(b).getElementsByTagName(‘div‘); For(aLi,aDiv) }; tab(‘aTapHeadWrap‘,‘aTapWrapS‘); tab(‘aTapHeadWrap2‘,‘aTapWrapS2‘); } </script>
css:
<style type="text/css"> .hide { display: none; } li { list-style: none; display: inline-block; background-color: #90EE90; } .tapActiveLi { background-color: #FF7F50; } div { border: 1px solid #f00; } .aTapWrap { border: none; } </style>
ps:这个没有阻止冒泡,话说要不要阻止?我也不知道。大神说看着烦,让我把冒泡删了,我再加一个版本吧。
js:
window.onload = function() { function For(c, d) { function stopPropagation(e) { e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } }; for(var i = 0; i < c.length; i++) { c[i].index = i; c[i].onclick = function(e) { stopPropagation(e) for(var j = 0; j < c.length; j++) { c[j].className = ""; d[j].className = "hide"; } this.className = "tapActiveLi"; d[this.index].className = ""; } } } function tab(a, b) { var aLi = document.getElementById(a).getElementsByTagName(‘li‘); var aDiv = document.getElementById(b).getElementsByTagName(‘div‘); For(aLi, aDiv) }; tab(‘aTapHeadWrap‘, ‘aTapWrapS‘); tab(‘aTapHeadWrap2‘, ‘aTapWrapS2‘); }
时间: 2024-10-17 16:59:25