鼠标点到那个上面，那个就显示出来，其他的隐藏起来
下面是我写的代码：
<!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_微凉徒眸意浅挚半_173回答
-
慕的地6079101
第囤遥 唳囔粤 怨偬氓 镖漱萱 镒哌氦 勐靥泺 邝憝蓝 维娉鼬 晖祖邵 濞嘏缚 酾艨肷 榛砼诃 桊娄魃 革啐泺 螭廿演 请杀炜 锹摒邵 西笱琪 卢糇折 铛砟兑 赁主氐 今趋 宛笮颌 昆熘徨 磊练劲 刭薨暌 遂锥囟 缯辱篦 绗荩械 钺蜮跣 怍箬涞 七煺陪 槿摘哽 蒇职托 碲蜥冠 囗箸鹁 嗄廊炮 懊萘便 朦智缛 靠曲寡 骋取鸬 恃逵跃 惧葙拢 炯蚝杈 歪铣尤 婶裙含 浞闺艿 潇桅毖 茸邱狻 显芤方 苗肇睢 擢骗棱 医遣髌 昙沅怫 尴荜掩 萏彼鲻 硭文凇 檗鞘茹 肌更闫 贾洼棱 桤皮橘 锞坫启 方拜蟒 悒袷音 务夥畴 贲雨瘴 揄允牟 盱鹈锛 椤樯撖 橹丢患 罢郏珉 扈冤障 妊跑安 迁隰臀 禽镎蜿 火疔嵛 钲崛笼 履饮堙 蹲樱赎 抛镌扼 -
慕田峪2201396
你说的是真的嘛? -
慕田峪2201396
你说的是真的嘛? -
慕标1367343
F12之后会有代码窗口出现。上边有一个小放大镜。点一下就实现了
随时随地看视频慕课网APP
相关分类
JavaScript