JS使用面向對象技術實現(xiàn)的tab選項卡效果示例

更新時間：2017年02月28日 09:32:55 作者：小炒花生米

這篇文章主要介紹了JS使用面向對象技術實現(xiàn)的tab選項卡效果,結合具體實例形式分析了js面向對象技術與tab選項卡功能的具體實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS使用面向對象技術實現(xiàn)的tab選項卡效果。分享給大家供大家參考，具體如下：

運行效果圖如下：

代碼如下：

html:

<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="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》9月8日維護公告</a></span><span class="hui9">09-28</span></li>
    <li class="ml10"><span class="fu"><a title="《絕地戰(zhàn)爭》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" >《絕地戰(zhàn)爭》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("菜單層數(shù)量和內容層數(shù)量不一樣!");
      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");
}

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: