您好,登錄后才能下訂單哦!
本文教大家用原生js實現(xiàn)的最簡單選項卡切換效果,鼠標(biāo)滑過,對應(yīng)的隱藏部分顯示,并且樣式發(fā)生改變。
代碼最簡潔,js行為優(yōu)化版,復(fù)制粘貼即可使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript-實現(xiàn)最簡易選項卡</title> <style> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tabli{float:left;color:#fff;height:30px; cursor:pointer;line-height:30px;list-style-type:none; padding:0 20px;} #tab li.current{color:#000;background:#ddd;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px; display:none;margin:0 30px;padding:10px 0;} </style> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">第一課</li> <li>第二課</li> <li>第三課</li> </ul> <div id="content"> <ul > <li>每天一個</li> <li>小應(yīng)用</li> <li>提升你的</li> <li>javascript</li> <li>基礎(chǔ)</li> </ul> <ul> <li>改變網(wǎng)頁背景顏色</li> <li>函數(shù)傳參</li> <li>高重用性函數(shù)的編寫</li> <li>126郵箱全選效果</li> <li>循環(huán)及遍歷操作</li> <li>調(diào)試器的簡單使用</li> <li>典型循環(huán)的構(gòu)成</li> <li>for循環(huán)配合if判斷</li> </ul> <ul> <li>函數(shù)詳解:函數(shù)構(gòu)成、調(diào)用、事件、傳參數(shù)</li> <li>定時器的使用:setInterval、setTimeout</li> <li>定時器應(yīng)用:站長站導(dǎo)航效果</li> <li>定時器應(yīng)用:自動播放的選項卡</li> <li>定時器應(yīng)用:數(shù)碼時鐘</li> <li>程序調(diào)試方法</li> </ul> </div> </div> <script type="text/javascript"> (function(){ var $ = function(id){ return document.getElementById(id); } //取到相應(yīng)的dom節(jié)點 var myli = $("tab").getElementsByTagName("li"); var myul = $("content").getElementsByTagName("ul"); //循環(huán),讓每個小選項卡對應(yīng)相應(yīng)的ul,對應(yīng)的顯示,不對應(yīng)的隱藏 for(var i=0;i<myli.length;i++){ myli[i].index = i; //取到對應(yīng)的下標(biāo) myli[i].onmouseover=function(){ //循環(huán)要顯示的ul,當(dāng)下標(biāo)等于鼠標(biāo)滑過事件的li時,樣式才發(fā)生改變 for(var n=0;n<myli.length;n++){ myli[n].className =""; myul[n].style.display="none"; this.className="current"; myul[this.index].style.display="block"; } } } })() </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。