二五七
2015-07-27 16:35
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ #nav{ margin:5px; padding:5px; font:14px normal; } #nav ul{ width:300px; margin:0px; padding-bottom:2px; padding-left:5px; height:30px; line-height:30px; display:block; font-family:微软雅黑; } #nav ul li{ margin:0px 3px; height:24px; line-height:24px; text-align:center; display:inline-block; border:1px solid #CCC; padding:3px; float:left; width:57px; } #nav div{ width:300px; margin-left:6px; padding:6px 10px 10px 10px; border:1px solid #CCC; border-top:2px solid #CCA; height:120px; line-height:28px; } .hide{ display:none; } </style> <script type="text/javascript"> // JS实现选项卡切换 var N=document.getElementById("nav"); var U=n.getElementsByTagName("ul")[0]; var L=U.getElementsByTagName("li"); var D=N.getElementsByTagName("div"); for(var i=0;i<li.length;i++) { L[i].index=i; L[i].onclick=function(){ for(var j=0;j<L.length;j++) { L[j].className=""; D[j].className="hide"; } this.classNmae="on"; D[this.index].className=""; } } </script> </head> <body> <!-- HTML页面布局 --> <div id="nav"> <ul> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br /> 200万内购五环三居 140万安家东三环<br /> 北京首现零首付楼盘 53万购东5环50平<br /> 京楼盘直降5000 中信府 公园楼王现房<br /> </div> <div > 40平出租屋大改造 美少女的混搭小窝<br /> 经典清新简欧爱家 90平老房焕发新生<br /> 新中式的酷色温情 66平撞色活泼家居<br /> 瓷砖就像选好老婆 卫生间烟道的设计<br /> </div> <div> 通州豪华3居260万 二环稀缺2居250w甩<br /> 西3环通透2居290万 130万2居限量抢购<br /> 黄城根小学学区仅260万 121平70万抛!<br /> 独家别墅280万 苏州桥2居优惠价248万<br /> </div> </div> </body> </html>
还没有人回答问题,可以看看其他问题
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题