Tab选项卡效果,兼容IE、火狐、Chrome等多个浏览器

发布时间：2018-08-22 01:52:41 所属栏目：创业来源：站长网

导读：烈火网(LieHuo.Net)滑动门特效教程：以前，在烈火的教程中，我们曾经提供过多款滑动门的特效。这次有所不同的是，根据以前的一个tab，加上新的结构基础做出来的。兼容IE6- IE8 、FireFox、 Chrome 、 Opera 和 Safari 。如果你不介意display:none出现在CSS

　　烈火网(LieHuo.Net)滑动门特效教程：以前，在烈火的教程中，我们曾经提供过多款滑动门的特效。这次有所不同的是，根据以前的一个tab，加上新的结构基础做出来的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出现在CSS里的话，可以小改一下，那结构、样式、行为就算是完全分离开了。至于具体的代码我这里就不分析了，大家看看就知，很容易看懂。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>注重语义、结构、用户体验的Tab选项卡 - Liehuo.net</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="#">计算机机房管理系统<b>Delphi源代码</b></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 class="footer">Power By <a href="http://www.veryhuo.com">ReeQi</a><br/> 2010.04</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 /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

穗港科研团队首建真正	邓丽君引爆虚拟人板块
比亚迪成立电池公司，	自称新势力2.0，电动屋