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

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

成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元路南做網(wǎng)站,已為上家服務(wù),為路南各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

<!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">
      <!--這個(gè)ul為選項(xiàng)卡的菜單，提供選擇項(xiàng)，并且設(shè)置其中一個(gè)li為默認(rèn)樣式-->
      <ul>
        <li class="active">新聞</li>
        <li>社會</li>
        <li>科技</li>
        <li>娛樂</li>
      </ul>
      <!--這個(gè)div為選項(xiàng)卡的內(nèi)容，顯示不同菜單的不同內(nèi)容，并且設(shè)置其中一個(gè)div為可見，其他隱藏-->
      <div id="content">
        <div >新聞</div>
        <div>社會</div>
        <div>科技</div>
        <div>娛樂</div>
      </div>
    </div>
  </body>
</html>

選項(xiàng)卡的制作原理是：有若干的選項(xiàng)和對應(yīng)數(shù)量的內(nèi)容，當(dāng)對其中一個(gè)選項(xiàng)進(jìn)行操作時(shí)，顯示對應(yīng)內(nèi)容，其他內(nèi)容不顯示。所以，在頁面布局的時(shí)候，我們先給一個(gè)選項(xiàng)設(shè)置特殊樣式和顯示其對應(yīng)的內(nèi)容，其他選項(xiàng)樣式不變，對應(yīng)內(nèi)容隱藏。當(dāng)操作選項(xiàng)時(shí)，把選項(xià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;  //為每個(gè)li添加對應(yīng)的索引index
      aLi[i].onclick=function(){  //循環(huán)為每個(gè)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)前點(diǎn)擊的元素樣式變成active
      aDiv[this.index].style.display='block';  //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
      }
    }
  }
</script>

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

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

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; //為每個(gè)li添加對應(yīng)的索引index
  aLi[i].onclick=function(){ //循環(huán)為每個(gè)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)前點(diǎn)擊的元素樣式變成active
    aLink[this.index].style.display='block'; //this.index 獲取當(dāng)前l(fā)i對應(yīng)的索引
  }
}

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

名稱欄目：JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
新聞來源：http://muchs.cn/article18/jpeedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、建站公司、企業(yè)建站、網(wǎng)站收錄、定制開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名