JS笔记-选项卡的重用

以三个选项卡举例：

html部分

<style>
*{padding:0;margin:0;}
a{text-decoration: none;}
.clearfix:after{display: block;content:‘‘;clear: both;}
.clearfix{zoom:1;}
.fl{float: left;}
.tab{ width:400px; margin: 10px;}
.tab div{display:none; height:150px;text-align:center;color:#fff; font-size:50px;}
.tab .btn{border-top:2px solid #fff;}
.tab .btn.active { border-top:2px solid orange; }
.tab .txt.active { display:block; }
/*1*/
.one div {background: purple;}
/*2*/
.two{}
.two div {background: pink;height: 250px;}
/*3*/
.three div {background: orange;height: 300px;}
</style>

<!-- 1 -->
    <div class="j-tab tab one fl" data-sEvent="onclick">
        <input type="button" class="active j-btn btn" value="1-1"/>
        <input type="button" class="j-btn btn" value="1-2" />
        <input type="button" class="j-btn btn" value="1-3" />
        <input type="button" class="j-btn btn" value="1-4" />
        <input type="button" class="j-btn btn" value="1-5" />
        <div class="active j-txt txt ">1-1</div>
        <div class="j-txt txt ">1-2</div>
        <div class="j-txt txt ">1-3</div>
        <div class="j-txt txt ">1-4</div>
        <div class="j-txt txt ">1-5</div>
    </div>
    <!-- 2 -->
    <div class="j-tab tab two fl" data-sEvent="onmouseover">
        <a href="javascript:;"class="active j-btn btn">2-1</a>
        <a href="javascript:;"class="j-btn btn">2-2</a>
        <a href="javascript:;"class="j-btn btn">2-3</a>
        <div class="active j-txt txt ">2-1</div>
        <div class="j-txt txt ">2-2</div>
        <div class="j-txt txt ">2-3</div>
    </div>
    <!-- 3 -->
    <div class="j-tab tab three fl" data-sEvent="onclick">
        <input type="button" class="active j-btn btn" value="3-1" />
        <input type="button" class="j-btn btn" value="3-2" />
        <input type="button" class="j-btn btn" value="3-3" />
        <div class="active j-txt txt ">3-1</div>
        <div class="j-txt txt ">3-2</div>
        <div class="j-txt txt ">3-3</div>
    </div>

JS部分

<script>
window.onload=function (){
    tab(‘j-tab‘);
    function tab(sName)
    {
        var aParent=document.getElementsByClassName(sName);
        for (var i=0; i<aParent.length; i++)
        {
            var sEvent=aParent[i].getAttribute(‘data-sEvent‘);//将事件存在自定义data-sEvent属性中
            _tab(aParent[i],sEvent);
        }

        function _tab(oParent,sEvent)
        {
            var aBtn=oParent.getElementsByClassName(‘j-btn‘);
            var aTxt=oParent.getElementsByClassName(‘j-txt‘);
            for (var i=0; i<aBtn.length; i++)
            {
                (function (index){
                    aBtn[i][sEvent]=function (){
                        for (var i=0; i<aBtn.length; i++)
                        {
                            aBtn[i].className=‘j-btn btn‘;
                            aTxt[i].className=‘j-txt txt‘;
                        }

                        this.className=‘active j-btn btn‘;
                        aTxt[index].className=‘active j-txt txt‘;
                    };
                })(i);
            }
        }
    }
};
</script>