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

Posted 2020-09-01 xing.org1^

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