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結構

<div class="zsContWrap">
                <!--橫向菜單-->
                <ul class="zsContMenu clearfix">
                    <li class="on"><a href="javascript:;">標簽1</a></li>
                    <li><a href="javascript:;">標簽2</a></li>
                </ul>
                <!--切換內容-->
                <div class="zsCont">
                    <!--標簽1 對應展示 內容-->
                    <div>
                        
                    </div>
                    <!--標簽2 對應展示內容-->
                    <div class="hide">
                    </div>
                </div>
            </div>

class名字解釋

on：選中狀態時標簽的樣式

hide{display：none；}/*特別注意，樣式的優先級*/

————————————————————

【這個可以多次調用，調用時，就多寫一個tab（）就好了，括號里的兩個參數換掉成最新的結構的class樣式名字，】

 

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請注明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/