JS使用面向对象技术实现的tab选项卡效果示例

<ul class="scrollUl">  <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新服排期</a></li>  <li id="m02" class="sd02" value="1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >官方公告</a></li></ul><div id="c01" style="display: block;">  <ul>    <li class="ml10 mt10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="最三国“群雄逐鹿”震撼开启 敬请期待." class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最三国“群雄逐鹿”震撼开启 ...</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>    <li class="ml10"><span class="fu"><a title="《绝地战争》9月8日维护公告" class="hei" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >《绝地战争》9月8日维护公告</a></span><span class="hui9">09-28</span></li>   </ul></div>

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");}