| 本文实例为大家分享了JS编写选项卡效果的具体代码，供大家参考，具体内容如下 <!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 为当前目标的索引值 /* 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>效果图： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
JavaScript实现经典贪吃蛇游戏
vue3 与 vue2 优点对比汇总 |
