注重体验、语义、兼容的TAB滑动门修正版-滑动门选项卡

2018-10-16 20:53:07

字体：大中小

来源：转载

供稿：网友

根据以前的一个tab，加上新的结构基础做出来的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出现在CSS里的话，可以小改一下，那结构、样式、行为就算是完全分离开了。至于具体的代码我这里就不分析了，大家看看就知，很容易看懂。

Source Code to Run [www.cuoxin.com 错新网]

<!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=utf-8" /><title>注重语义、结构、用户体验的Tab选项卡</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="#"><a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">计算机</a>机房管理系统Delphi源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></a></li></ul><h2>锐点</h2><ul><li><a href="#"><a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">计算机</a>机房管理系统Delphi源<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a></a></li><li><a href="#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li><li><a href="#">BMP位图按钮的VC++实现</a></li></ul></div><div class="footer">Power By <a href="/">zz5u</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>

提示:您可以修改后再运行

上一篇：横向、竖向两个选项卡Tab联动的实现-滑动门选项卡

下一篇：myFocus-tab 各种功能的选项卡切换-滑动门选项卡