前端之新闻切换卡
2016-01-31 21:02
288 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ li{ list-style-type:none; float:left; width:100px; border:1px solid red; text-align:center; background-color:#fff; } div{ clear:both; float:left; border:1px solid red; width:304px; margin-left:40px; border-top:none; padding-top:5px; } } #d1{display:block;} #d2{display:none;} #d3{display:none;} .tab{border-bottom:none;} </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload=function(){ var li=document.getElementsByTagName('li'); var div=document.getElementsByTagName('div'); for(var i=0;i<li.length;i++){ li[i].index=i; li[i].onmouseover=function(){ for(var j=0;j<div.length;j++) { li[j].className=""; div[j].style.display="none"; } var This=this; This.className="tab"; div[This.index].style.display="block"; } } } </script> </head> <body> <!-- HTML页面布局 --> <ul> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div id="d1"> <pre> 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 <pre> </div> <div id="d2"> <pre> 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 <pre> </div> <div id="d3"> <pre> 通州豪华3居260万 二环稀缺2居250w甩 西3环通透2居290万 130万2居限量抢购 黄城根小学学区仅260万 121平70万抛! 独家别墅280万 苏州桥2居优惠价248万 <pre> </div> </body> </html>
相关文章推荐
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 深入探讨前端框架react
- Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
- 自己动手写的javascript前端等待控件
- 也谈截取首页新闻 - 范例
- 前端必备神器 Snap.svg 弹动效果
- PHP实现简单的新闻发布系统实例
- 一张Web前端的思维导图分享
- Android实现仿网易新闻主界面设计
- Python采集腾讯新闻实例
- 浅谈AngularJS--基础
- 浅谈AngularJS--域变量(scope)
- AngularJS' Internals In Depth(深入理解 AngularJS)
- 3ff8 javascript 获取Flash下载进度兼容IE, FireFox,Chrome浏览器
- Pongo网页版JavaScript源代码及设计思路
- web前端开发工具