用JS編寫選項(xiàng)卡效果
更新時間:2021年09月17日 10:04:58 作者:fanfan_h
這篇文章主要為大家詳細(xì)介紹了用JS編寫選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS編寫選項(xiàng)卡效果的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; } .selectka { width:500px; height:400px; margin:auto; border:1px solid #09e1ff; } .left,.right{ float:left; height:400px; } #menu{ text-align: center; line-height: 80px; font-size: 20px; color:purple; } li{ list-style: none; } #menu>li{ width:100px; height:80px; border:1px dashed blueviolet; box-sizing: border-box; } .right{ position: relative; width:399px; background: pink; margin-left:1px; text-align: center; font-size: 100px; line-height: 400px; } .right li{ position: absolute; width:399px; height:400px; display: none; } </style> </head> <body> <div class="selectka"> <div class="left"> <ul id="menu"> <li class="menulist">衣服</li> <li class="menulist">美妝</li> <li class="menulist">包包</li> <li class="menulist">美食</li> <li class="menulist">首飾</li> </ul> </div> <div class="right"> <ul> <li class="numlist">衣服</li> <li class="numlist">美妝</li> <li class="numlist">包包</li> <li class="numlist">美食</li> <li class="numlist">首飾</li> </ul> </div> </div> <script> var menu_list=document.getElementsByClassName("menulist"); var num_list=document.getElementsByClassName("numlist"); var moo=null; var yuu=null; for(var i=0;i<menu_list.length;i++) { menu_list[i].index = i; menu_list[i].onmouseenter = function () { /* console.log(this.index);*/ //this.index 為當(dāng)前目標(biāo)的索引值 /* for(var k=0;k<num_list.length;k++){ num_list[k].style.display ="none"; } num_list[this.index].style.display ="block"; }*/ if(yuu)yuu.style.background ="none"; this.style.background ="yellow"; yuu=this; if(moo)moo.style.display="none"; num_list[this.index].style.display = "block"; moo = num_list[this.index]; } } </script> </body> </html>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)簡單選項(xiàng)卡功能
- js實(shí)現(xiàn)簡單的可切換選項(xiàng)卡效果
- js選項(xiàng)卡的實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- JS實(shí)現(xiàn)選項(xiàng)卡實(shí)例詳解
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- 用js實(shí)現(xiàn)簡單的tab選項(xiàng)卡
- JS實(shí)現(xiàn)選項(xiàng)卡插件的兩種寫法(jQuery和class)
- js利用iframe實(shí)現(xiàn)選項(xiàng)卡效果
- js實(shí)現(xiàn)簡單選項(xiàng)卡制作
相關(guān)文章
js中onclick和addEventListener的區(qū)別
本文對javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價值,感興趣的可以了解一下2023-08-08詳解JavaScript中精度失準(zhǔn)問題及解決方法
這篇文章主要介紹了JavaScript中精度失準(zhǔn)問題及解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02使用Github?Actions發(fā)布npm包完整過程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09javascript 像素拼圖實(shí)現(xiàn)代碼
非常不錯的像素拼圖效果2009-04-04