欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS使用面向?qū)ο蠹夹g(shù)實現(xiàn)的tab選項卡效果示例

 更新時間：2017年02月28日 09:32:55   作者：小炒花生米  
這篇文章主要介紹了JS使用面向?qū)ο蠹夹g(shù)實現(xiàn)的tab選項卡效果,結(jié)合具體實例形式分析了js面向?qū)ο蠹夹g(shù)與tab選項卡功能的具體實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS使用面向?qū)ο蠹夹g(shù)實現(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ù)量和內(nèi)容層數(shù)量不一樣!");
      return false;
    }
    for(var i = 0 ; i < menus.length ; i++)
    {
      _this.$(menus[i]).value = i;
      _this.$(menus[i]).onmouseover = function(){
        //1.先關(guān)閉所有的導(dǎo)航和內(nèi)容：
        for(var j = 0 ; j < menus.length ; j++)
        {
          _this.$(menus[j]).className = closeClass;
          _this.$(divs[j]).style.display = "none";
        }
        //2.打開當前的導(dǎo)航和內(nèi)容：
        //_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");
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

相關(guān)文章

  • JavaScript實現(xiàn)顏色查看器

    JavaScript實現(xiàn)顏色查看器

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)顏色查看器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • JavaScript實時更新當前的時間的示例代碼

    JavaScript實時更新當前的時間的示例代碼

    這篇文章主要介紹了JavaScript實時更新當前的時間的示例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-07
  • 常見的瀏覽器存儲方式（cookie、localStorage、sessionStorage）

    常見的瀏覽器存儲方式（cookie、localStorage、sessionStorage）

    今天我們從前端的角度了解一下瀏覽器存儲，我們常見且常用的存儲方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
    2019-05-05
  • 詳解JavaScript嚴格模式的使用方法

    詳解JavaScript嚴格模式的使用方法

    JavaScript的嚴格模式（Strict?Mode）是一種在代碼中啟用的特殊模式，用于提供更嚴格的語法和錯誤檢查，以改善代碼質(zhì)量和增強安全性，本文主要介紹JS的嚴格模式的用法，可以幫助大家避免一些常見的錯誤,需要的朋友可以參考下
    2023-05-05
  • LayUI下拉樹TreeSelect的使用解讀

    LayUI下拉樹TreeSelect的使用解讀

    這篇文章主要介紹了LayUI下拉樹TreeSelect的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • JAVASCRIPT代碼編寫俄羅斯方塊網(wǎng)頁版

    JAVASCRIPT代碼編寫俄羅斯方塊網(wǎng)頁版

    俄羅斯方塊方塊是小時候的一個回憶，從最開始的掌上的黑白游戲機，到電視游戲機，到電腦，無不有它的痕跡，今天我們來一起重溫它的一種實現(xiàn)方法，也算是整理一下我的思路吧，感興趣的小伙伴一起學(xué)習吧
    2015-11-11
  • 在javascript中執(zhí)行任意html代碼的方法示例解讀

    在javascript中執(zhí)行任意html代碼的方法示例解讀

    關(guān)于javascript的eval（）函數(shù)無法執(zhí)行html代碼的問題，下面為大家介紹下一種在javascript中執(zhí)行任意html代碼的方法，感興趣的朋友不要錯過
    2013-12-12
  • uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js解決辦法

    uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js解決辦法

    這篇文章主要給大家介紹了關(guān)于uniapp踩坑實戰(zhàn)之文件查找失敗:'uview-ui'?at?main.js的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • JS實現(xiàn)隨機數(shù)生成算法示例代碼

    JS實現(xiàn)隨機數(shù)生成算法示例代碼

    JS實現(xiàn)隨機數(shù)生成算法的方法有很多，本文為大家介紹一個比較不錯的方法，代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助
    2013-08-08
  • 微信小程序引用iconfont圖標的方法

    微信小程序引用iconfont圖標的方法

    這篇文章主要介紹了微信小程序引用iconfont圖標的方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-10-10

最新評論