体验、语义、兼容很好的TAB滑动门
2011-06-02 10:53
246 查看
代码简介:
根据以前的一个tab,加上新的结构基础做出来的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出现在CSS里的话,可以小改一下,那结构、样式、行为就算是完全分离开了。至于具体的代码我这里就不分析了,大家看看就知,很容易看懂。
代码内容:
代码来自:http://www.webdm.cn/webcode/c8753548-722e-4a97-8bfe-549f90db5b62.html
根据以前的一个tab,加上新的结构基础做出来的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出现在CSS里的话,可以小改一下,那结构、样式、行为就算是完全分离开了。至于具体的代码我这里就不分析了,大家看看就知,很容易看懂。
代码内容:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>体验、语义、兼容很好的TAB滑动门_网页代码站(www.webdm.cn)</title> <style> * {margin:0; padding:0;} body {background:#FFF; color:#333;} a {color:#333; text-decoration:none;} a:hover {text-decoration:underline;} ul, li {list-style:none;} .wrap {width:700px; margin:0 auto; line-height:25px; font-size:12px;} h1 {text-align:center; margin-top:50px;} #hotnews {position:relative; width:350px; margin: 0 auto; height:150px; margin-top:50px;} #hotnews h2 {display:block; float:left; width:50px; margin-right:2px; font-size:12px; font-weight:normal; text-align:center; cursor:pointer;} #hotnews .title_normal {background:#CCC;} #hotnews .title_current {background:#C2130E; color:#FFF;} #hotnews ul {position:absolute; left:0px; top:25px; width:300px; padding:8px 0 0 5px; border-top:3px solid #C2130E; font-size:14px } .footer {margin-top:50px; border-top:#CCC dashed 1px; text-align:right;} </style> </head> <body> <div class="wrap"> <h1>注重结构、语义、用户体验的Tab选项卡</h1> <div id="hotnews"> <h2>新闻</h2> <ul> <li><a href="#">[新闻]轿车逆行撞死斑马线上7岁后逃逸</a></li> <li><a href="#">[新闻]乌鲁木齐警方抓捕疑犯遭暴力</a></li> <li><a href="#">[新闻]数据表对拷程序Delphi控件版</a></li> </ul> <h2>火炬</h2> <ul> <li><a href="#">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li> <li><a href="#">BMP位图按钮的VC++实现</a></li> <li><a href="#">[火炬]河南驻马店警方配备宝马警车</a></li> </ul> <h2>图片</h2> <ul> <li><a href="#">BMP位图按钮的VC++实现</a></li> <li><a href="#">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li> <li><a href="#">计算机机房管理系统Delphi源代码</a></li> </ul> <h2>锐点</h2> <ul> <li><a href="#">计算机机房管理系统Delphi源代码</a></li> <li><a href="#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li> <li><a href="#">BMP位图按钮的VC++实现</a></li> </ul> </div> </div> <script> function $(id){return document.getElementById(id);} function $tag(id,tagName){return $(id).getElementsByTagName(tagName)} var onum=0;//用于控制默认打开的标签 var Ds=$tag("hotnews","ul"); var Ts=$tag("hotnews","h2"); for(var i=0; i<Ds.length;i++){ if(i==onum){ Ds[i].style.display="block"; Ts[i].className = "title_current"; } else{ Ds[i].style.display="none"; Ts[i].className = "title_normal"; } Ts[i].value=i; Ts[i].onmouseover=function(){ if(onum==this.value){return false;}; Ts[onum].className="title_normal"; Ts[this.value].className="title_current"; Ds[onum].style.display="none"; Ds[this.value].style.display="block"; onum=this.value; } } </script> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/c8753548-722e-4a97-8bfe-549f90db5b62.html
相关文章推荐
- 注重结构、语义、用户体验的Tab选项卡
- 注重结构、语义、用户体验的Tab选项卡
- 用户体验很好的密码校验js
- jQuery实现Tab,滑动门,选项卡,图片切换
- js实现黑色简易的滑动门网页tab选项卡效果
- HTML5 新语义元素的浏览器兼容问题
- 100个Tab 滑动门实例
- libxl库的介绍,对Excel操作封装得很好的一个库,兼容2007版和多字节字符(最后有破解版下载)
- 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
- TAB切换简易代码,兼容IE9以上主流浏览器
- 自定义的带tab的可左右滑动的viewpager之二viewpager与fragment不兼容
- 一款CSS+JS+DIV制作的蓝色风格tab滑动门
- 模仿JQ的UI-TAB控件,高度封装,兼容多浏览器
- 很好用的Tab标签切换功能,延迟Tab切换。
- 禁用Tab键JS代码兼容Firefox和IE
- Android Studio之初体验 ---- 很好很强大
- LINQ体验(11)——LINQ to SQL语句之Null语义和String/DateTime方法
- 用户体验测试的自动化实现 - 对检查Tab顺序的脚本进行完善
- 语义变焦(Semantic Zoom)改善用户体验
- 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera