<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{list-style:none;} a{color:black;text-decoration:none;outline:none;} li{float:left;text-align:center;margin-right:10px;line-height:30px;background:white;} .clear{clear:both;} .list{width:60px;border:3px solid red;} #main div{border:1px solid blue;line-height:2;} #main{width:500px;height:700px;} .list:hover{cursor:pointer;} .blo{display:block;} .hide{display:none;} </style> <script type="text/javascript"> window.onload=function(){ var list=document.getElementsByName('content'); //document.write(list.length); var li=document.getElementsByClassName('list'); //document.write(li.length); //for(var i=0;i<3;i++) // { li[0].onclick=function() { list[0].className='blo'; list[(0+1)%3].className='hide'; list[(0+2)%3].className='hide'; } li[1].onclick=function() { list[1].className='blo'; list[(1+1)%3].className='hide'; list[(1+2)%3].className='hide'; } li[2].onclick=function() { list[2].className='blo'; list[(2+1)%3].className='hide'; list[(2+2)%3].className='hide'; } //} } // JS实现选项卡切换 </script> </head><body><!-- HTML页面布局 --><ul><li><a href="#"><div>房产</div></a></li><li><a href="#"><div>家居</div></a></li><li><a href="#"><div>二手房</div></a></li></ul><div></div><div id="main"><div name="content"> 275万购昌平邻铁三居 总价20万买一居</br> 200万内购五环三居 140万安家东三环</br> 北京首现零首付楼盘 53万购东5环50平</br> 京楼盘直降5000 中信府 公园楼王现房 </div><div name="content"> 40平出租屋大改造 美少女的混搭小窝</br> 经典清新简欧爱家 90平老房焕发新生</br> 新中式的酷色温情 66平撞色活泼家居</br> 瓷砖就像选好老婆 卫生间烟道的设计 </div><div name="content"> 通州豪华3居260万 二环稀缺2居250w甩</br> 西3环通透2居290万 130万2居限量抢购</br> 黄城根小学学区仅260万 121平70万抛!</br> 独家别墅280万 苏州桥2居优惠价248万 </div></div> </body></html>
添加回答
举报
0/150
提交
取消