快捷導(dǎo)航

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

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

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

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

<!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>社會(huì)</li>
        <li>科技</li>
        <li>娛樂(lè)</li>
      </ul>
      <!--這個(gè)div為選項(xiàng)卡的內(nèi)容，顯示不同菜單的不同內(nèi)容，并且設(shè)置其中一個(gè)div為可見(jiàn)，其他隱藏-->
      <div id="content">
        <div style="display: block;">新聞</div>
        <div>社會(huì)</div>
        <div>科技</div>
        <div>娛樂(lè)</div>
      </div>
    </div>
  </body>
</html>

選項(xiàng)卡的制作原理是：有若干的選項(xiàng)和對(duì)應(yīng)數(shù)量的內(nèi)容，當(dāng)對(duì)其中一個(gè)選項(xiàng)進(jìn)行操作時(shí)，顯示對(duì)應(yīng)內(nèi)容，其他內(nèi)容不顯示。所以，在頁(yè)面布局的時(shí)候，我們先給一個(gè)選項(xiàng)設(shè)置特殊樣式和顯示其對(duì)應(yīng)的內(nèi)容，其他選項(xiàng)樣式不變，對(duì)應(yīng)內(nèi)容隱藏。當(dāng)操作選項(xiàng)時(shí)，把選項(xiàng)的類名改為特殊樣式的類名，并且顯示對(duì)應(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添加對(duì)應(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)清空l(shuí)i樣式
        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對(duì)應(yīng)的索引
      }
    }
  }
</script>

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

<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)容就不看了，接下來(lái)我就開(kāi)始寫(xiě)JS的代碼，getElementById什么的巴拉巴拉開(kāi)始寫(xiě)，寫(xiě)完for循環(huán)覺(jué)得寫(xiě)完了，然后就運(yùn)行。。。默認(rèn)頁(yè)正常，點(diǎn)擊，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一個(gè)console.log，檢測(cè)獲取的aLi,aLink，有值，能獲取，沒(méi)錯(cuò)。然后下面循環(huán)檢測(cè)aLink[i]，未定義，這是什么情況？在JS代碼搞了將近一個(gè)小時(shí)，換獲取方法，換變量名….各種方法，沒(méi)效果。萬(wàn)萬(wàn)沒(méi)想到的是，重新檢測(cè)aLi的時(shí)候，發(fā)現(xiàn)長(zhǎng)度為3。。頓時(shí)懵逼，aLink的長(zhǎng)度為2，所以肯定有一個(gè)找不到。趕緊把第二個(gè)li改成span，成功。萬(wàn)惡的 ||||||||。只能說(shuō)自己的知識(shí)還不夠，還要繼續(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; //為每個(gè)li添加對(duì)應(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)清空l(shuí)i樣式
      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對(duì)應(yīng)的索引
  }
}

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

您可能感興趣的文章: