这两天遇到一个页面，同一个页面中同一个特效会用好多次，比如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'); }
2017-04-18 14:35:13 再加一个jq版本的
function tab(menus, conts) { $(menus).click(function() { var index = $(this).index(); $(this).addClass("on").siblings().removeClass("on"); $(conts).eq(index).removeClass("hide").siblings().addClass("hide"); }) } tab(".zsContMenu li", ".zsCont div")
tab（参数1，参数2），
参数1：就是用选择器定位到用来切换的几个标签，
参数2:就是用选择器定位到需要对应标签展示的内容块
以下是对应jq版本的html结构
1 <div class="zsContWrap"> 2 <!--横向菜单--> 3 <ul class="zsContMenu clearfix"> 4 <li class="on"><a href="javascript:;">标签1</a></li> 5 <li><a href="javascript:;">标签2</a></li> 6 </ul> 7 <!--切换内容--> 8 <div class="zsCont"> 9 <!--标签1 对应展示 内容--> 10 <div> 11 12 </div> 13 <!--标签2 对应展示内容--> 14 <div class="hide"> 15 </div> 16 </div> 17 </div>
class名字解释
on：选中状态时标签的样式
hide{display：none；}/*特别注意，样式的优先级*/
————————————————————
【这个可以多次调用，调用时，就多写一个tab（）就好了，括号里的两个参数换掉成最新的结构的class样式名字，】
声明：
请尊重博客园原创精神，转载或使用图片请注明：
博主：xing.org1^
出处：http://www.cnblogs.com/padding1015/
