js面向对象 实现 tab选项卡效果

 

html:

 

<ul class="scrollUl">
    <li id="m01" class="sd01" value="0"><a href="#">新服排期</a></li>
    <li id="m02" class="sd02" value="1"><a href="#">官方公告</a></li>
</ul>

<div id="c01" style="display: block;">
    <ul>
        <li class="ml10 mt10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#">最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>
    </ul>
</div>
<div class="hidden" id="c02" style="display: none;">
    <ul>
        <li class="ml10 mt10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
        <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#">《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>
     </ul>
</div>

 

 

js:

 

function scrollDoor(){
}
scrollDoor.prototype = {
    sd : function(menus,divs,openClass,closeClass){
        var _this = this;
        if(menus.length != divs.length)
        {
            alert("菜单层数量和内容层数量不一样!");
            return false;
        }
        for(var i = 0 ; i < menus.length ; i++)
        {
            _this.$(menus[i]).value = i;
            _this.$(menus[i]).onmouseover = function(){
                //1.先关闭所有的导航和内容：
                for(var j = 0 ; j < menus.length ; j++)
                {
                    _this.$(menus[j]).className = closeClass;
                    _this.$(divs[j]).style.display = "none";
                }
                //2.打开当前的导航和内容：
                //_this.$(menus[this.value]).className = openClass;
                this.className = openClass;
                _this.$(divs[this.value]).style.display = "block";
            }
        }
    },
    $ : function(oid){
        if(typeof(oid) == "string")
        return document.getElementById(oid);
        return oid;
    }
}
window.onload = function(){
    var SDmodel = new scrollDoor();
    SDmodel.sd(["m01","m02"],["c01","c02"],"sd01","sd02");
    //SDmodel.sd(["m001","m002"],["c001","c002"],"sd01","sd02");
}