基于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)容進(jìn)行修飾：

<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)致程序報錯，但是好長時間都找不到錯誤；總而言之還是要多多細(xì)心。

方法二：

方法一適用于選項卡比較少的情況，但如果選項卡內(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進(jìn)行修飾，我們直接來看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ù)完成多個選項卡。

您可能感興趣的文章: