【JavaScript】(2)选项卡切换
2015-06-17 17:36
661 查看
注释写的很清楚:
<html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式*** */ * { padding:0px; margin:0px; font:12px normal "microsoft yahei"; /*normal是使用默认粗细的意思*/ } #tabs { width:290px; height:150px; padding:5px; margin:20px; } #tabs ul { list-style:none; display:block; height:30px; line-height:30px; border-bottom:2px saddlebrown solid; /* 定义tabs 的子后代ullist-style意思是去掉列表默认的小圆点,display:block定义块状元素,块状元素的长宽高都可以定义,line-height是定义行高,后面是定义上边边框为2px 马鞍棕色 实心的线*/ } #tabs ul li { background:#fff; cursor:pointer; float:left; list-style:none; height:28px; line-height:28px; margin:0px 3px; border:1px solid #aaaaaa; border-bottom:none; display:inline-block; width:60px; text-align:center; /*cursor:pointer意思就是鼠标放上去变成小手的形状,高度和行高的值一样的话就垂直居中了,margin设置了距离边界的距离上下为0左右为3 然后是设置边框 下边框为空 display定义为内联块状元素,然后设置宽度 很文本居中 */ } #tabs ul li.on { border-top:2px solid saddlebrown; border-bottom:2px solid #fff ; /*说白了这个就是设置第一个选择框的样式,不过选择器也是有优先级的,加入都为同一个元素设置颜色就会显示id的 然后是.xx 其次是便签选择器*/ } #tabs div { height:120px; line-height:25px; border:1px solid #336699; border-top:none; padding:5px; } .hide { display:none; /*此元素不会被显示*/ } </style> <script type="text/javascript"> // JS实现选项卡切换 window.onload = function() { var otab = document.getElementById("tabs"); //获取 ID 为 tabs 的 div ,并定义一个 otab 变量 var oul = document.getElementsByTagName("ul")[0]; //必须加上[0],不然获取不到 ul var olis = oul.getElementsByTagName("li"); //获取 ul 中的 li 标签 var odivs = otab.getElementsByTagName("div"); //获取 otab(ID 为 tabs) 中的 div //循环 olis.length(li 的个数) 次 for(var i = 0, len = olis.length; i < len; i++) { olis[i].index = i; //自定义 index ,为以后的操作做准备 //当点击第 i 个 li ,执行函数 olis[i].onclick = function() { // 循环 olis.length(li 的个数) 次 for(var n = 0; n < len; n++) { olis .className = ""; //去除所有 li 的样式,其实只是为去除其中一个 li 的 on ,由于不知道是哪一个 li 有 on 样式,所以全部清除 odivs .className = "hide"; //给所有的 div(特指 ID 为 tabs 中的 div) 加上 hide 样式,使所有 div 隐藏 } this.className = "on"; //给点击的那个 li 添加 on 样式,表示被选中 odivs[this.index].className=""; //去除对应的 div 的 hide 样式,使其显示 } }; } </script> </head> <body> <!-- HTML页面布局 --> <div id="tabs"> <ul> <li class="on">房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 </div> <div class="hide"> 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 </div> <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩 西3环通透2居290万 130万2居限量抢购 黄城根小学学区仅260万 121平70万抛! 独家别墅280万 苏州桥2居优惠价248万 </div> </div> </body> </html>
相关文章推荐
- ExtJs4 之 TreePanel
- extjs4 之 Grid 列编辑
- ExtJs4之Grid配置信息
- JavaScript 学习笔记(1):关于函数、对象以及面向对象
- 几种Json工具包的解析速度对比
- JS基础学习笔记(一)
- JS 创建对象(常见的几种方法)
- js对象及new对象/函数的比较区别
- JS当前日期相加相减
- javascript获取鼠标坐标
- js写分页
- js经验1
- js时间转换相关
- javascript 数组
- 理解Javascript的动态语言特性
- John:How JavaScript Timers Work
- jstl_fmt
- jstl_fmt
- 浅谈Javascript事件模拟
- Javascript之事件流