分享和记录下选项卡切换的心得
来源:互联网 发布:网络大电影的受众 编辑:程序博客网 时间:2024/06/05 08:08
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>选项卡切换</title> <style type="text/css"> body,ul,li,div{ padding: 0; margin:0; } ul{ list-style: none; } #big{ width: 400px; margin: 50px auto; } #big #tab_title{ height: 31px; border-bottom: 2px solid #8B4513; } /*在写样式的过程中我遇到一个问题,就是如何在点击选项卡的时候刚好隐藏这个选项卡下面的边框线呢?给ul一个高度和下边框,当点击选项卡的时候,li的高度加上它所有的边框=ul的高度加上它所有的边框。当然,同时要给li的下边框设置粗一些的白色边框来盖住。*/ #big #tab_title li{ width: 70px; height: 28px; line-height: 28px; border:1px solid #aaa; border-bottom: none; float: left; text-align: center; margin-left: 5px; cursor: pointer; } #big div{ clear: both; border:1px solid #aaa; border-top: none; font-size: 10px; padding: 20px; } .hide{ display: none; } #big #tab_title .active{ border-top: 2px solid #8B4513; border-bottom: 3px solid #fff; } </style> <script type="text/javascript"> window.onload=function(){ // 定义的变量最关键的是获取到li标签数组和div内容数组 var big =document.getElementById("big"); var tab_title_li=big.getElementsByTagName("li"); var tab_content=big.getElementsByTagName("div"); // 建立一个遍历li数组的循环 for(var i=0;i<tab_title_li.length;i++){ // 将它的数组的索引值储存起来,以便待会与内容数组一一对应 tab_title_li[i].index=i; // 建立一个点击事件 tab_title_li[i].onclick=function(){ for(var i=0;i<tab_title_li.length;i++){ // 点击任意一个li的时候首先清空所有的li的class,给所有内容加一个hide的类(隐藏所有的内容) tab_title_li[i].className = ""; tab_content[i].className="hide"; } // 给所点击的li添加上一个active的类,给所点击的li相同索引的内容块清空其类(即恢复显示) tab_title_li[this.index].className="active"; tab_content[this.index].className=""; } } } // 最后的最后,说一下总体的思路吧,因为我比较蠢,不喜勿喷,首先我们要做一个选项卡切换的效果,这么一套做下来我的思路是先获取到所有选项卡的数组和所有内容块的数组,找出两者的联系(每一个选项卡都与其内容的索引一一对应)。 // 然后建立一个for循环,先把选项卡的数组存在index里,建立一个点击选项卡的事件,事件里面首先清空所有选项卡和内容的活跃状态,再给所点击的选项卡和内容添加活跃状态 </script></head><body><div id="big"> <ul id="tab_title"> <li class="active">选项卡一</li> <li>选项卡二</li> <li>选项卡三</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div class="hide"> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div></div></body></html>
阅读全文
0 0
- 分享和记录下选项卡切换的心得
- 不定期更新,记录和分享一些心得
- 简单的选项卡切换
- MUI tab选项卡之间的切换和数据获取
- ECSHOP ie9下的切换选项卡问题,不能切换的问题处理
- 【代码片段】javascript下选项卡切换
- 迫不及待的和大家分享iOS下的正则表达式类库的心得!
- 迫不及待的和大家分享iOS下的正则表达式类库的心得!
- GreenDao的使用心得和分享
- 问题:在 windows servers 2003 环境下,安装了.NET 1.1 和 2.0 的版本后,IIS中居然找不到1.1和2.0的切换选项卡
- 关于广州创龙公司TMS320C6748开发使用的一些心得和大家分享下
- 我最近研究了hive的相关技术,有点心得,这里和大家分享下。
- 各种功能的选项卡切换
- 禁止tabhost选项卡的切换
- 一个简单的jquery 选项卡切换
- javascript实现的tab选项卡切换
- JavaScript实现的选项卡切换
- android开发(8) 选项卡的切换
- Java多线程(四)、线程池
- C++__多态性与虚函数
- 安装gulp和bower
- 另一种反弹shell的方式
- 织梦cms模板下载:广告品牌设计网站织梦模板
- 分享和记录下选项卡切换的心得
- HTML总结(2)
- XML的基础语法
- idea 使用maven创建JavaWeb项目
- Java多线程(五)、多线程其他知识简要介绍
- postion absolution relative fixed static 使用
- AMR在IP域中的编码(rfc3267,4867)
- Mysql查看表的建表语句
- 修改织梦cms模板大全,织梦建站必看宝典