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>
时间： 2024-08-26 12:45:43