快捷導(dǎo)航

JS實現(xiàn)選項卡效果的代碼實例

更新時間：2019年05月20日 11:12:38 作者：liujian_laohan

這篇文章主要介紹了JS選項卡效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

選項卡這個效果估計以后的項目會經(jīng)常涉及到，對代碼還是半熟練的情況下還是寫下來吧。
先來布局一個簡單的頁面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{margin: 0;padding: 0;list-style: none;}
      #box{margin: 50px;}
      #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;}
      #box .active{background: red;}
      #content{clear: both;}
      #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;}
    </style>
  </head>
  <body>
    <div id="box">
      <!--這個ul為選項卡的菜單，提供選擇項，并且設(shè)置其中一個li為默認(rèn)樣式-->
      <ul>
        <li class="active">新聞</li>
        <li>社會</li>
        <li>科技</li>
        <li>娛樂</li>
      </ul>
      <!--這個div為選項卡的內(nèi)容，顯示不同菜單的不同內(nèi)容，并且設(shè)置其中一個div為可見，其他隱藏-->
      <div id="content">
        <div style="display: block;">新聞</div>
        <div>社會</div>
        <div>科技</div>
        <div>娛樂</div>
      </div>
    </div>
  </body>
</html>

選項卡的制作原理是：有若干的選項和對應(yīng)數(shù)量的內(nèi)容，當(dāng)對其中一個選項進行操作時，顯示對應(yīng)內(nèi)容，其他內(nèi)容不顯示。所以，在頁面布局的時候，我們先給一個選項設(shè)置特殊樣式和顯示其對應(yīng)的內(nèi)容，其他選項樣式不變，對應(yīng)內(nèi)容隱藏。當(dāng)操作選項時，把選項的類名改為特殊樣式的類名，并且顯示對應(yīng)內(nèi)容。

<script type="text/javascript">
  window.onload=function(){
    var oBox=document.getElementById('box');
    var aLi=oBox.getElementsByTagName('li');
    var oCon=document.getElementById('content');
    var aDiv=oCon.getElementsByTagName('div');

    for(var i=0;i<aLi.length;i++){
      aLi[i].index=i;  //為每個li添加對應(yīng)的索引index
      aLi[i].onclick=function(){  //循環(huán)為每個li添加onclick事件
      for(var i=0;i<aLi.length;i++){
        aLi[i].className=''; //循環(huán)清空li樣式
        aDiv[i].style.display='none'; //循環(huán)隱藏所有div
      }
      this.className='active'; //當(dāng)前點擊的元素樣式變成active
      aDiv[this.index].style.display='block';  //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
      }
    }
  }
</script>

今天在做選項卡效果時遇到了一個非常低級的錯誤，但卻遲遲找不到原因，如下：
這個是我布局的選項卡的菜單，看起來很簡單，一個ul包著3個li，其中一個是 |，所以可以點擊的菜單項只有兩項，沒毛病。

<ul id="text">
  <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必備軟件</a></li>
  <li id="shu">|</li>
  <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用軟件</a></li>
</ul>

內(nèi)容就不看了，接下來我就開始寫JS的代碼，getElementById什么的巴拉巴拉開始寫，寫完for循環(huán)覺得寫完了，然后就運行。。。默認(rèn)頁正常，點擊，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一個console.log，檢測獲取的aLi,aLink，有值，能獲取，沒錯。然后下面循環(huán)檢測aLink[i]，未定義，這是什么情況？在JS代碼搞了將近一個小時，換獲取方法，換變量名….各種方法，沒效果。萬萬沒想到的是，重新檢測aLi的時候，發(fā)現(xiàn)長度為3。。頓時懵逼，aLink的長度為2，所以肯定有一個找不到。趕緊把第二個li改成span，成功。萬惡的 ||||||||。只能說自己的知識還不夠，還要繼續(xù)努力?。?！

var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');

for(var i=0;i<aLi.length;i++){
  aLi[i].index=i; //為每個li添加對應(yīng)的索引index
  aLi[i].onclick=function(){ //循環(huán)為每個li添加onclick事件
    for(var i=0;i<aLi.length;i++){
      aLi[i].className=''; //循環(huán)清空li樣式
      aLink[i].style.display='none'; //循環(huán)隱藏所有div
    }
    this.className='active'; //當(dāng)前點擊的元素樣式變成active
    aLink[this.index].style.display='block'; //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
  }
}

以上所述是小編給大家介紹的JS選項卡效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: