首页 > 代码库 > 注重结构、语义、用户体验的Tab选项卡

注重结构、语义、用户体验的Tab选项卡

2024-08-09 17:01:41   216人阅读

效果如下图所示：

 

技术分享

 

HTML code:

 

 

<!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="http://www.mamicode.com/#">[新闻]轿车逆行撞死斑马线上7岁后逃逸</a></li><li><a href="http://www.mamicode.com/#">[新闻]乌鲁木齐警方抓捕疑犯遭暴力</a></li><li><a href="http://www.mamicode.com/#">[新闻]数据表对拷程序Delphi控件版</a></li></ul><h2>火炬</h2><ul><li><a href="http://www.mamicode.com/#">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li><li><a href="http://www.mamicode.com/#">BMP位图按钮的VC++实现</a></li><li><a href="http://www.mamicode.com/#">[火炬]河南驻马店警方配备宝马警车</a></li></ul><h2>图片</h2><ul><li><a href="http://www.mamicode.com/#">BMP位图按钮的VC++实现</a></li><li><a href="http://www.mamicode.com/#">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li><li><a href="http://www.mamicode.com/#">计算机机房管理系统Delphi源代码</a></li></ul><h2>锐点</h2><ul><li><a href="http://www.mamicode.com/#">计算机机房管理系统Delphi源代码</a></li><li><a href="http://www.mamicode.com/#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li><li><a href="http://www.mamicode.com/#">BMP位图按钮的VC++实现</a></li></ul></div><div class="footer">Power By <a href="http://www.mamicode.com/">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=http://www.mamicode.com/i;"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选项卡


联系
我们