幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下
本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="text/css"> ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width: 403px; border-top: none; } .list ul{ overflow: hidden; } .list li{ float: left; } .list li{ padding-left: 28px; padding-right: 28px; padding-top: 6px; padding-bottom: 6px; border: 1px solid #ccc; background: -moz-linear-gradient(top, #FEFEFE, #EDEDED); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border-right: none; cursor: pointer; } #listCon{ height: 100px; } #listCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } .list li:first-child{ border-left: none; } .list li:hover{ background: #fff; border-bottom: none; } .list li.cur{ background: #fff; border-bottom: none; } #listCon div.cur{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="tab"> <div class="list"> <ul> <li class="cur">许嵩</li> <li>周杰伦</li> <li>林俊杰</li> <li>陈奕迅</li> </ul> </div> <div id="listCon"> <div class="cur">断桥残雪、千百度、幻听、想象之中</div> <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div> <div>被风吹过的夏天、江南、一千年以后</div> <div>十年、K歌之王、浮夸</div> </div> </div> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("tab"); var lis = oDiv.getElementsByTagName("li"); var oDivCon = document.getElementById("listCon"); var lisDiv = oDivCon.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ lis[i].index = i; lis[i].onmouseover = function(){ show(this.index); } } function show(a){ for(var j=0;j<lis.length;j++){ lis[j].className = ""; lisDiv[j].className = ""; } lis[a].className = "cur"; lisDiv[a].className = "cur"; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,tab,选项卡
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...