作业——tab切换简易版

 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>

View Code

显示效果：

还有一段来自网络：

  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>

View Code