JS-【同頁面多次調用】tab選項卡封裝

標籤：迭代   建議   tab選項卡   pre   連絡方式   方式   load   大神   css   

這兩天遇到一個頁面，同一個頁面中同一個特效會用好多次，比如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‘);            }

 

JS-【同頁面多次調用】tab選項卡封裝