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

时间：2021-02-16 17:09:51

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

标签：

相关文章