js实现网页tab选项卡切换效果
Posted JaydenLD@Clara
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现网页tab选项卡切换效果相关的知识，希望对你有一定的参考价值。
1 <style> 2 *{margin:0;padding:0;} 3 body{font-size:14px;font-family:"Microsoft YaHei";} 4 ul,li{list-style:none;} 5 #tab{position:relative;} 6 #tab .tabList ul li{ 7 float:left; 8 background:#fefefe; 9 background:-moz-linear-gradient(top, #fefefe, #ededed); 10 background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed)); 11 background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); 12 border:1px solid #ccc; 13 padding:5px 0; 14 width:100px; 15 text-align:center; 16 margin-left:-1px; 17 position:relative; 18 cursor:pointer; 19 } 20 #tab .tabCon{ 21 position:absolute; 22 left:-1px; 23 top:32px; 24 border:1px solid #ccc; 25 border-top:none; 26 width:403px; 27 height:100px; 28 } 29 #tab .tabCon div{ 30 padding:10px; 31 position:absolute; 32 opacity:0; 33 filter:alpha(opacity=0); 34 } 35 #tab .tabList li.cur{ 36 border-bottom:none; 37 background:#fff; 38 } 39 #tab .tabCon div.cur{ 40 opacity:1; 41 filter:alpha(opacity=100); 42 } 43 </style> 44 </head> 45 <body> 46 47 <div id="tab" style="margin-left:460px;margin-top:20px"> 48 <div class="tabList"> 49 <ul> 50 <li class="cur">许嵩</li> 51 <li>周杰伦</li> 52 <li>林俊杰</li> 53 <li>陈奕迅</li> 54 </ul> 55 </div> 56 <div class="tabCon"> 57 <div class="cur">断桥残雪、千百度、幻听、想象之中</div> 58 <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div> 59 <div>被风吹过的夏天、江南、一千年以后</div> 60 <div>十年、K歌之王、浮夸</div> 61 </div> 62 </div> 63 64 <script> 65 window.onload = function() { 66 var oDiv = document.getElementById("tab"); 67 var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li"); 68 var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div"); 69 var timer = null; 70 for (var i = 0; i < oLi.length; i++) { 71 oLi[i].index = i; 72 oLi[i].onmouseover = function() { 73 show(this.index); 74 } 75 } 76 function show(a) { 77 index = a; 78 var alpha = 0; 79 for (var j = 0; j < oLi.length; j++) { 80 oLi[j].className = ""; 81 aCon[j].className = ""; 82 aCon[j].style.opacity = 0; 83 aCon[j].style.filter = "alpha(opacity=0)"; 84 } 85 oLi[index].className = "cur"; 86 clearInterval(timer); 87 timer = setInterval(function() { 88 alpha += 2; 89 alpha > 100 && (alpha = 100); 90 aCon[index].style.opacity = alpha / 100; 91 aCon[index].style.filter = "alpha(opacity=" + alpha + ")"; 92 alpha == 100 && clearInterval(timer); 93 }, 94 5) 95 } 96 } 97 </script>
以上是关于js实现网页tab选项卡切换效果的主要内容，如果未能解决你的问题，请参考以下文章