HTML+CSS+JS实现选项卡
2015-03-04 19:10
696 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{font:14px normal "microsoft yahei";padding:0px;margin:0px;} #tabs{width:100%;padding-top:100px;} #tabs ul{list-style:none;display:block;width:302px;height:30px;border-bottom:2px solid red;line-height:30xp;} #tabs ul li{display:inline-block;float:left;width:60px;border:1px solid #999;margin-left:5px;text-align:center;height:23px;padding-top:5px;border-bottom:none;} #tabs li:hover{cursor:pointer;} #tabs .active{border-top:2px solid red;border-bottom:2px solid #fff;} #tabs .text{border:1px solid blue; width:290px;height:120px;padding:5px;border-top:0;line-height:25px;display:none;} #tabs .show{display:block;} #tabs .hide{display:none;} </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload=function(){ var liEleArr = document.getElementById("myul").getElementsByTagName("li"); var divEleArr = document.getElementById("tabs").getElementsByTagName("div"); for(var i=0;i<liEleArr.length;i++){ var liEle = liEleArr[i]; liEle.index = i; liEle.onmouseover = function(){ for(var j=0;j<liEleArr.length;j++){ liEleArr[j].className=""; divEleArr[j].className="text hide"; } this.className="active"; divEleArr[this.index].className="text show"; } } } </script> </head> <body> <!-- HTML页面布局 --> <div id="tabs" align="center"> <ul id="myul"> <li class="active" style="margin-left:10px;">房产</li> <li>家居</li> <li>二手房</li> </ul> <div class="text show"> 275万购昌平邻铁三居 总价20万买一居<br/> 200万内购五环三居 140万安家东三环<br/> 北京首现零首付楼盘 53万购东5环50平<br/> 京楼盘直降5000 中信府 公园楼王现房<br/> </div> <div class="text"> 40平出租屋大改造 美少女的混搭小窝<br/> 经典清新简欧爱家 90平老房焕发新生<br/> 新中式的酷色温情 66平撞色活泼家居<br/> 瓷砖就像选好老婆 卫生间烟道的设计<br/> </div> <div class="text"> 通州豪华3居260万 二环稀缺2居250w甩<br/> 西3环通透2居290万 130万2居限量抢购<br/> 黄城根小学学区仅260万 121平70万抛!<br/> 独家别墅280万 苏州桥2居优惠价248万<br/> </div> </div> </body> </html>
今天学习的时候写一个选项卡,献上代码和截图
相关文章推荐
- HTML CSS +js 实现tab选项卡,自动轮换
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- 用html+css+js实现选项卡切换效果
- html+css+js实现选项卡切换
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- html+css+js实现选项卡效果
- div+css+js实现鼠标略过自动切换的选项卡
- UL LI结构实现二级导航菜单(HTML+CSS+JS)
- php压缩HTML函数轻松实现压缩html/js/Css及注意事项
- html+js+css+php实现点击五星进行评分
- HTML+CSS+JS实现左边栏滑动框带关闭按钮
- html css js 实现Tab标签页示例代码
- HTML+JS+CSS选项卡效果[搜集整理]
- div+css+js实现竖向排列的标签选项卡
- html+css+jquery实现选项卡(模仿搜索风云榜选项卡)
- 用html+css+js实现的一个简单的图片切换特效
- 结合Html/js/css实现超级链接访问JavaScript的事件!(实例)
- jsbeautifier + CScript/WScript/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化 js 脚本命令行工具 并集成到 EditPlus
- css+js实现选项卡
- HTML+CSS----IE6下背景透明实现-css/js--png图片