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

基于JS實現(xiàn)網(wǎng)頁中的選項卡（兩種方法）

 更新時間：2017年06月16日 08:39:26   作者：domunweb  
這篇文章主要介紹了用js語句實現(xiàn)網(wǎng)頁中的選項卡（兩種方法），非常不錯，具有參考借鑒價值,需要的朋友可以參考下

網(wǎng)頁中經(jīng)常會用到選項卡這種東東，說白了就是點擊一個選項，下面會彈出這個選項里的內(nèi)容。

方法一：

方法一利用簡單的代碼即可實現(xiàn)，以下是全部的代碼；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>選項卡</title>
    <style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="ul1">
        <li>首頁</li>
        <li>產(chǎn)品</li>
        <li>新聞</li>
        <li>聯(lián)系</li>
        <li>我的</li>
      </ul>
      <div id="content">
        <div class="active">
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </div>
          <div>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");
        //alert(odiv.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className='';
              odiv[i].style.display='none';
            }
            this.className='show';
            odiv[this._index].style.display='block';
          }
        }
      }
    </script>
  </body>
</html>

首先我們在HTML部分定義網(wǎng)頁選項卡中的內(nèi)容。

<div id="box">
      <ul id="ul1"><!--選項卡中的點擊部分-->
        <li>首頁</li>
        <li>產(chǎn)品</li>
        <li>新聞</li>
        <li>聯(lián)系</li>
        <li>我的</li>
      </ul>
      <div id="content"> 
        <div class="active"><!--選項卡中要顯示和被顯示的部分-->
          <ul>
            <li>new1</li>
            <li>new2</li>
            <li>new3</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new4</li>
            <li>new5</li>
            <li>new6</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new7</li>
            <li>new8</li>
            <li>new9</li>
          </ul>
        </div>
        <div>
          <ul>
            <li>new10</li>
            <li>new11</li>
            <li>new12</li>
          </ul>
        </div>
          <div>
          <ul>
            <li>new13</li>
            <li>new14</li>
            <li>new15</li>
          </ul>
        </div>
      </div>
    </div>

CSS部分對HTML中的內(nèi)容進行修飾：

<style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 600px;background: #ccc;margin: 0 auto;}
      li{list-style: none;}
      #ul1{display: block; width: 100%;overflow: hidden;}
      #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
      #content{width: 100%;margin-top: 20px;}
      #content div{display: none;}
      #content div.active{display: block;}
      .show{background: red;}
    </style>

最后是最重要的js部分：

<script type="text/javascript">
      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
        //alert(odiv.length)
        for(var i=0;i<oli.length;i++){
          oli[i]._index=i;
          oli[i].onclick=function(){
            //alert(i);
            for(i=0;i<oli.length;i++){
              oli[i].className='';
              odiv[i].style.display='none';
            }
            this.className='show';
            odiv[this._index].style.display='block';
          }
        }
      }
    </script>

JS語句中的第一個for循環(huán)是為了取得所有的選項卡中的點擊部分；因為I這個變量在下面的事件函數(shù)中無法訪問到，所以每次點擊時，i變量循環(huán)到oli.length值。因此將i的值交給一個我們自定義的元素屬性上來保存循環(huán)中i的值，供下面使用。即：oli[i]._index=i;

添加點擊函數(shù)后，第二個for循環(huán)是為了把所有的oli的className改為“空”和所有的odiv的style為display='none'；循環(huán)結(jié)束后，在給當(dāng)前點擊的這個oli添加className和下面相應(yīng)的odiv的style為display='block';

以下是運行的結(jié)果：

在編寫程序時一定要注意，選項卡中的點擊部分即：li的數(shù)量（JS里oli.length）要和下面ID為content的div里包含的div數(shù)量（JS里odiv.length）相同，我在編寫程序時就因為oli.length與odiv.length不相等，導(dǎo)致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細心。

方法二：

方法一適用于選項卡比較少的情況，但如果選項卡內(nèi)容較多時我們要用到這種方法，第二種方法運用到了這周我們老師講的一個在JS種比較重要的知識點：自運行函數(shù)

(function a(){
  //函數(shù)里的內(nèi)容      
      })(參數(shù));

定義函數(shù)a();給整個函數(shù)帶上括號，后面的括號為輸入?yún)?shù)；

以下為方法二自運行函數(shù)的程序：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多個tab選項卡</title>
    <script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var oDiv = document.getElementById(id);
        var oBtn = oDiv.getElementsByTagName("li");
        var oBox = oDiv.getElementsByTagName("div");
        for(var i = 0; i < oBtn.length; i++) {
          //console.log(i)
          (function(index) {//自執(zhí)行函數(shù)
            oBtn[index].addEventListener(event, function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = '';
                oBox[i].className = 'tabSide';
              }
              this.className = 'active';
              oBox[index].className = 'active';
            });//添加事件監(jiān)聽
          })(i)
        }
      }
      }
    </script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .tabMenu {
        width: 300px;
        margin: 50px auto 0 auto;
      }
      .tabMenu ul {
        display: block;
        overflow: hidden;
        width: 300px;
        height: 40px;
        background: #eee;
      }
      .tabMenu ul li {
        cursor: pointer;
        display: block;
        float: left;
        width: 100px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
      }
      .tabMenu ul li.active {
        background: #f00;
        color: #fff;
      }
      .tabMenu .tabSide {
        display: none;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
      .tabMenu div.active {
        display: block;
        padding: 10px;
        line-height: 20px;
        width: 278px;
        border: solid 1px #eee;
      }
    </style>
  </head>
  <body>
    <div id="tabMain" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">內(nèi)容1</div>
      <div class="tabSide">內(nèi)容2</div>
      <div class="tabSide">內(nèi)容3</div>
    </div>
    <div id="tabMain1" class="tabMenu">
      <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">內(nèi)容1</div>
      <div class="tabSide">內(nèi)容2</div>
      <div class="tabSide">內(nèi)容3</div>
    </div>
    <div id="tabMain2" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">內(nèi)容1</div>
      <div class="tabSide">內(nèi)容2</div>
      <div class="tabSide">內(nèi)容3</div>
    </div>
      <div id="tabMain4" class="tabMenu">
        <ul>
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
      </ul>
      <div class="tabSide active">內(nèi)容1</div>
      <div class="tabSide">內(nèi)容2</div>
      <div class="tabSide">內(nèi)容3</div>
    </div>
  </body>
</html>

和方法一相似先寫HTML里的內(nèi)容，CSS部分對HTML進行修飾，我們直接來看JS部分；

<script>
      window.onload = function() {
        tab("tabMain", "click");
        tab("tabMain1", "click");
        tab("tabMain2", "click");
        tab("tabMain4", "click");
         function tab(id, event) {
        var oDiv = document.getElementById(id);
        var oBtn = oDiv.getElementsByTagName("li");
        var oBox = oDiv.getElementsByTagName("div");
        for(var i = 0; i < oBtn.length; i++) {
          //alert(i)；
          (function(index) {//自執(zhí)行函數(shù)
            oBtn[index].addEventListener(event,   function() {
              for(var i = 0; i < oBtn.length; i++) {
                oBtn[i].className = '';
                oBox[i].className = 'tabSide';
              }
              this.className = 'active';
              oBox[index].className = 'active';
            });//添加事件監(jiān)聽
          })(i)
        }
      }
      }
    </script>

通過添加事件和自運行函數(shù)完成多個選項卡。

相關(guān)文章

  • JavaScript中實現(xiàn)map功能代碼分享

    JavaScript中實現(xiàn)map功能代碼分享

    這篇文章主要介紹了JavaScript中實現(xiàn)map功能代碼分享,本文直接給出實現(xiàn)代碼,給出一個MAP類,類中包含大多數(shù)的常用方法,還可以自己擴展,需要的朋友可以參考下
    2015-06-06
  • javascript表單驗證以及正則表達式舉例詳解

    javascript表單驗證以及正則表達式舉例詳解

    正則表達式描述了一種字符串匹配的模式,可以用來檢查一個串是否含有某種子串、將匹配的子串替換或者從某個串中取出符合某個條件的子串等,常用于表單驗證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗證以及正則表達式的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • js eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例

    js eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例

    下面小編就為大家?guī)硪黄猨s eval函數(shù)使用,js對象和字符串互轉(zhuǎn)實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 淺談JS正則表達式的RegExp對象和括號的使用

    淺談JS正則表達式的RegExp對象和括號的使用

    下面小編就為大家?guī)硪黄獪\談JS正則表達式的RegExp對象和括號的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • 淺談JavaScript中的屬性:如何遍歷屬性

    淺談JavaScript中的屬性:如何遍歷屬性

    下面小編就為大家?guī)硪黄獪\談JavaScript中的屬性:如何遍歷屬性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Javascript客戶端將指定區(qū)域?qū)С龅絎ord、Excel的代碼

    Javascript客戶端將指定區(qū)域?qū)С龅絎ord、Excel的代碼

    Javascript 瀏覽器客戶端導(dǎo)出指定區(qū)域到Word、Excel，非常不錯的應(yīng)用實例
    2008-10-10
  • JS實現(xiàn)簡單獲取最近7天和最近3天日期的方法

    JS實現(xiàn)簡單獲取最近7天和最近3天日期的方法

    這篇文章主要介紹了JS實現(xiàn)簡單獲取最近7天和最近3天日期的方法,涉及javascript針對日期與時間的相關(guān)數(shù)值運算與轉(zhuǎn)換操作技巧,需要的朋友可以參考下
    2018-04-04
  • js和C# 時間日期格式轉(zhuǎn)換的簡單實例

    js和C# 時間日期格式轉(zhuǎn)換的簡單實例

    下面小編就為大家?guī)硪黄猨s和C# 時間日期格式轉(zhuǎn)換的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • Bootstrap常用組件學(xué)習(xí)(整理)

    Bootstrap常用組件學(xué)習(xí)(整理)

    這篇文章是小編日常收集整理的有關(guān)bootstrap?常用組件包括Bootstrap?面板（Panels），Bootstrap?多媒體對象（Media?Object）知識，非常不錯，需要的朋友參考下吧
    2017-03-03
  • js實現(xiàn)頭像上傳并且可預(yù)覽提交

    js實現(xiàn)頭像上傳并且可預(yù)覽提交

    這篇文章主要介紹了js如何實現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下
    2020-12-12

最新評論