又是一款实用tab选项卡切换特效,这个选项卡特效兼容当前主流浏览器,给用户一个良好的体验效果。
<!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 name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <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;} .www_wuming_ren {width:700px; margin:0 auto; line-height:25px; font-size:12px;} h1 {text-align:center; margin-top:50px;} #hot_wuming_ren {position:relative; width:350px; margin: 0 auto; height:150px; margin-top:50px;} #hot_wuming_ren h2 {display:block; float:left; width:50px; margin-right:2px; font-size:12px; font-weight:normal; text-align:center; cursor:pointer;} #hot_wuming_ren .title_normal {background:#CCC;} #hot_wuming_ren .title_current {background:#C2130E; color:#FFF;} #hot_wuming_ren ul {position:absolute; left:0px; top:25px; width:300px; padding:8px 0 0 5px; border-top:3px solid #C2130E; font-size:14px } </style> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div class="www_wuming_ren"> <h1>武鸣人-各种信息免费发布,资源共享合作共赢</h1> <div id="hot_wuming_ren"> <h2>新闻</h2> <ul> <li><a href="https://www.wuming.ren">[新闻]武鸣人一号新闻标题</a></li> <li><a href="https://www.wuming.ren">[新闻]武鸣人二号新闻标题</a></li> <li><a href="https://www.wuming.ren">[新闻]武鸣人三号新闻标题</a></li> </ul> <h2>火炬</h2> <ul> <li><a href="https://www.wuming.ren">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li> <li><a href="https://www.wuming.ren">BMP位图按钮的VC++实现</a></li> <li><a href="https://www.wuming.ren">[火炬]河南驻马店警方配备宝马警车</a></li> </ul> <h2>图片</h2> <ul> <li><a href="https://www.wuming.ren">BMP位图按钮的VC++实现</a></li> <li><a href="https://www.wuming.ren">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li> <li><a href="https://www.wuming.ren">计算机机房管理系统Delphi源代码</a></li> </ul> <h2>锐点</h2> <ul> <li><a href="https://www.wuming.ren">计算机机房管理系统Delphi源代码</a></li> <li><a href="https://www.wuming.ren">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li> <li><a href="https://www.wuming.ren">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("hot_wuming_ren","ul"); var Ts=$tag("hot_wuming_ren","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; } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> </body> </html>
本文来自武鸣人网站,转载请注明出处