1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>tab切换简易版</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin:0; padding:0; font:normal 12px/1.5em "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;} 8 ul { margin: 0; padding: 0;} 9 li {list-style: none;} 10 .cf { *zoom: 1;} 11 .cf:after{ content: " "; clear: both; display: table;} 12 13 .box { width: 60%; height: auto; padding: 40px; margin: 20px auto; border:1px solid #ccc;} 14 .tabs { border-bottom: 1px solid #34495E;} 15 .content div { padding: 10px 20px; text-align: center; color: #fff} 16 .div1 { background-color: #9B59B6;} 17 .div2 { background-color: #2ECC71;} 18 .div3 { background-color: #3498DB;} 19 li{ float: left; padding: 5px 10px; margin-right: 1px;cursor:pointer; background-color: #ccc;} 20 li.selected { background-color: #34495E; color: #fff;} 21 .hidden { display: none;} 22 </style> 23 24 </head> 25 26 <body> 27 <div class="box"> 28 <ul class="cf tabs" id="tabs"> 29 <li class="selected">选项卡1</li> 30 <li>选项卡2</li> 31 <li>选项卡3</li> 32 </ul> 33 <div class="content" id="content"> 34 <div class="div1">content01</div> 35 <div class="div2 hidden">content02</div> 36 <div class="div3 hidden">content03</div></div> 37 </div> 38 39 <script type="text/javascript"> 40 var tabs = document.getElementById('tabs'); 41 var oLi = tabs.getElementsByTagName('li'); 42 var con = document.getElementById('content'); 43 var oDiv = con.getElementsByTagName('div'); 44 var timer = null; 45 46 for(var i=0;i<oLi.length;i++) 47 { 48 oLi[i].onclick = function(){ 49 50 for(var i=0;i<oLi.length;i++) 51 { 52 if(this==oLi[i]){ 53 oLi[i].className="selected" 54 oDiv[i].style.display="block"; 55 }else{ 56 oLi[i].className=""; 57 oDiv[i].style.display="none"; 58 } 59 } 60 } 61 } 62 </script> 63 </body> 64 </html>
显示效果：
还有一段来自网络：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>简单纯js实现网页tab选项卡切换效果</title> 6 <style> 7 *{margin:0;padding:0;} 8 body{font-size:14px;font-family:"Microsoft YaHei";} 9 ul,li{list-style:none;} 10 11 #tab{position:relative;} 12 #tab .tabList ul li{ 13 float:left; 14 background:#fefefe; 15 background:-moz-linear-gradient(top, #fefefe, #ededed); 16 background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed)); 17 background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); 18 border:1px solid #ccc; 19 padding:5px 0; 20 width:100px; 21 text-align:center; 22 margin-left:-1px; 23 position:relative; 24 cursor:pointer; 25 } 26 #tab .tabCon{ 27 position:absolute; 28 left:-1px; 29 top:32px; 30 border:1px solid #ccc; 31 border-top:none; 32 width:403px; 33 height:100px; 34 } 35 #tab .tabCon div{ 36 padding:10px; 37 position:absolute; 38 opacity:0; 39 filter:alpha(opacity=0); 40 } 41 #tab .tabList li.cur{ 42 border-bottom:none; 43 background:#fff; 44 } 45 #tab .tabCon div.cur{ 46 opacity:1; 47 filter:alpha(opacity=100); 48 } 49 </style> 50 </head> 51 <body> 52 53 <!-- 代码 begin --> 54 <div id="tab" style="margin-left:460px;margin-top:20px"> 55 <div class="tabList"> 56 <ul> 57 <li class="cur">许嵩</li> 58 <li>周杰伦</li> 59 <li>林俊杰</li> 60 <li>陈奕迅</li> 61 </ul> 62 </div> 63 <div class="tabCon"> 64 <div class="cur">断桥残雪、千百度、幻听、想象之中</div> 65 <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div> 66 <div>被风吹过的夏天、江南、一千年以后</div> 67 <div>十年、K歌之王、浮夸</div> 68 </div> 69 </div> 70 71 <script> 72 window.onload = function() { 73 var oDiv = document.getElementById("tab"); 74 var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li"); 75 var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div"); 76 var timer = null; 77 for (var i = 0; i < oLi.length; i++) { 78 oLi[i].index = i; 79 oLi[i].onmouseover = function() { 80 show(this.index); 81 } 82 } 83 function show(a) { 84 index = a; 85 var alpha = 0; 86 for (var j = 0; j < oLi.length; j++) { 87 oLi[j].className = ""; 88 aCon[j].className = ""; 89 aCon[j].style.opacity = 0; 90 aCon[j].style.filter = "alpha(opacity=0)"; 91 } 92 oLi[index].className = "cur"; 93 clearInterval(timer); 94 timer = setInterval(function() { 95 alpha += 2; 96 alpha > 100 && (alpha = 100); 97 aCon[index].style.opacity = alpha / 100; 98 aCon[index].style.filter = "alpha(opacity=" + alpha + ")"; 99 alpha == 100 && clearInterval(timer); 100 }, 101 5) 102 } 103 } 104 </script> 105 <!-- 代码 en --> 106 107 </body> 108 </html>