JS-【同页面多次调用】tab选项卡封装

这两天遇到一个页面，同一个页面中同一个特效会用好多次，比如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/