Tab选项卡结果,兼容IE、火狐、Chrome等多个赏识器

发布时间：2018-08-20 07:16:15 所属栏目：创业来源：站长网

导读：猛火网(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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如