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

js封裝tab標簽頁實例分享

 更新時間：2016年12月19日 12:05:03   作者：wxwx123  
本篇文章主要分享了js封裝tab標簽頁的示例代碼，具有很好的參考價值，需要的朋友一起來看下吧

話不多說，請看代碼

<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <style>
    *{ padding:0; margin:0;}
    .block{ display:block;}
    .none{ display:none;}
    #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
    #tab1,#tab2{ list-style:none;}
    #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
    #tab2 li:hover{ background:#CCC;}
    #tab1 li.on,#tab2 li.on{ background:#9C3;}
    #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
  </style>
</head>
<body>
<div id="wrap">
  <ul id="tab1">
    <li class="on">第一項</li>
    <li>第二項</li>
    <li>第三項</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<div id="wraps">
  <ul id="tab2">
    <li class="on">第一項</li>
    <li>第二項</li>
    <li>第三項</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<script type="text/javascript">
  tab("wrap","tab1","mouseover")
  tab("wraps","tab2");
  function tab(wrap,navul,eve){
//tab效果封裝，目前只有兩種變換方式，一種為點擊事件click（也是默認事件），另外一種為鼠標移過事件mouseover
    var divs=document.getElementById(wrap).getElementsByTagName("div");
    var lis=document.getElementById(navul).getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
      lis[i].indx=i;
      if(eve=="click" || eve==null){
        lis[i].onclick=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }else if(eve=="mouseover"){
        lis[i].onmouseover=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關文章

  • JS 拼湊字符串的簡單實例

    JS 拼湊字符串的簡單實例

    下面小編就為大家?guī)硪黄狫S 拼湊字符串的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • Bootstrap圖片輪播組件Carousel使用方法詳解

    Bootstrap圖片輪播組件Carousel使用方法詳解

    這篇文章主要為大家詳細介紹了Bootstrap圖片輪播組件Carousel使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-10-10
  • html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    為大家介紹一款JS截圖插件html2canvas.js， 它可以通過純JS對瀏覽器端經(jīng)行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個實例
    2020-01-01
  • 探討JavaScript中聲明全局變量三種方式的異同

    探討JavaScript中聲明全局變量三種方式的異同

    這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門語言最基本的概念，初學者都會很快掌握。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • JavaScript 防篡改對象的用法示例

    JavaScript 防篡改對象的用法示例

    這篇文章主要介紹了JavaScript 防篡改對象的用法示例，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以參考下
    2021-04-04
  • JavaScript本地存儲實現(xiàn)用戶名存儲案例

    JavaScript本地存儲實現(xiàn)用戶名存儲案例

    本文主要介紹了JavaScript本地存儲實現(xiàn)用戶名存儲案例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • JS實現(xiàn)彈幕小案例

    JS實現(xiàn)彈幕小案例

    這篇文章主要為大家詳細介紹了JS實現(xiàn)彈幕小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • JS 的應用開發(fā)初探(mootools)

    JS 的應用開發(fā)初探(mootools)

    昨天在公司內部做了一個小小的技術分享，就 js 應用開發(fā)方面跟大家談了一點自己的心得，最近因為工作關系花在這上面的時間較多也頗有些收獲，寫在這里備忘。
    2009-12-12
  • uni-app自定義導航欄右側做增加按鈕并跳轉鏈接功能

    uni-app自定義導航欄右側做增加按鈕并跳轉鏈接功能

    這篇文章主要介紹了uni-app自定義導航欄右側做增加按鈕并跳轉鏈接,本文通過實例代碼給大家分享實現(xiàn)思路，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-03-03
  • readonly和disabled的區(qū)別

    readonly和disabled的區(qū)別

    要慎用readonly和disabled, 指定了disabled的表單,在submit時,不會把它的值傳出去, 如下所示,有兩個text,一個是readonly一個是disabled,submit后,只能發(fā)送那個不是disabled的,注意地址欄的值. 要保存到本地,因為submit了,不然,看不到效果.
    2008-04-04

最新評論