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

下面是我写的代码：

<!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>

qq_微凉徒眸意浅挚半_17

浏览 2273回答 3

3回答

慕的地6079101

第囤遥唳囔粤怨偬氓镖漱萱镒哌氦勐靥泺邝憝蓝维娉鼬晖祖邵濞嘏缚酾艨肷榛砼诃桊娄魃革啐泺螭廿演请杀炜锹摒邵西笱琪卢糇折铛砟兑赁主氐今趋宛笮颌昆熘徨磊练劲刭薨暌遂锥囟缯辱篦绗荩械钺蜮跣怍箬涞七煺陪槿摘哽蒇职托碲蜥冠囗箸鹁嗄廊炮懊萘便朦智缛靠曲寡骋取鸬恃逵跃惧葙拢炯蚝杈歪铣尤婶裙含浞闺艿潇桅毖茸邱狻显芤方苗肇睢擢骗棱医遣髌昙沅怫尴荜掩萏彼鲻硭文凇檗鞘茹肌更闫贾洼棱桤皮橘锞坫启方拜蟒悒袷音务夥畴贲雨瘴揄允牟盱鹈锛椤樯撖橹丢患罢郏珉扈冤障妊跑安迁隰臀禽镎蜿火疔嵛钲崛笼履饮堙蹲樱赎抛镌扼

慕田峪2201396

你说的是真的嘛?

慕田峪2201396

你说的是真的嘛?

慕标1367343

F12之后会有代码窗口出现。上边有一个小放大镜。点一下就实现了

随时随地看视频慕课网APP