鼠标点到那个上面，那个就显示出来，其他的隐藏起来

下面是我写的代码：<!doctype html><html> <head> <title>TAB</title> <style type="text/css"> *{padding:0;margin:0;} body{width:1000;margin:0 auto;} #box{width:976px;margin:0 auto;border:2px solid red;} #menu{width:956px;margin:0 auto;} #menu ul{list-style:none;} #menu ul li{width:191px;height:50px;line-height:50px;font-size:30px;color:black;text-align:center;float:left;} #box .cos{width:952px;height:600px;border:2px solid #0f0;margin:0 auto;display:none;margin-top:60px;margin-bottom:10px;font-size:30px;color:red;} </style> <script type="text/javascript"> window.onload = function(){ //抓取元素 var boxObj = document.getElementById('box'); var liObj = document.getElementsByTagName('li'); var cosObj = document.getElementsByClassName('cos'); for(var i=0;i<liObj.length;i++){ liObj[i].onclick = function(){ for(var j=0;j<liObj.length;j++){ liObj[j].style.color='black'; cosObj[j].style.display='block'; } this.style.color='red'; cosObj[i].style.display='none'; } } } </script> </head> <body> <div id="box"> <div id="menu"> <ul> <li style="color:red;">衣柜</li> <li>空调</li> <li>服装</li> <li>电器</li> <li>厨房</li> </ul> </div> <div class="cos" style="display:block;">衣柜</div> <div class="cos">空调</div> <div class="cos">服装</div> <div class="cos">电器</div> <div class="cos">厨房</div> </div> </body></html>

查看完整描述

3 回答

热搜

最近搜索清空

鼠标点到那个上面，那个就显示出来，其他的隐藏起来

鼠标点到那个上面，那个就显示出来，其他的隐藏起来

3 回答

添加回答