几个不同的tab切换示例 - lovelyun
lovelyun发表于 2015-10-27 09:38:00
上一篇《论tab切换的几种实现方法》中讲了tab切换的4种不同实现原理，那么，现在到理论联系实际的时候了，下面就写几个实例。
一、仿”中国人民大学“官网的tab切换，背景是图片，效果图如下：
鼠标移到新闻时的效果
鼠标移到公告时的效果
鼠标移到交流时的效果
学术、交流和文体的内容为空，我没有写。完整代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style>
6 *{
7 padding: 0;
8 margin: 0;
9 }
10 body{
11 font-family: Arial,Verdana,sans-serif,"宋体";
12 }
13 li{
14 list-style: none;
15 float:left;
16 }
17 a{
18 text-decoration: none;
19 color: #ffeec6;
20 }
21 #tanContainer{
22 height: 210px;
23 width: 470px;
24 background: url(homeinfo-trans-bg.png);
25 overflow: hidden;
26 color: #ffeec6;
27 }
28 #tanContainer li a{
29 height: 25px;
30 display: inline-block;
31 margin-left: 18px;
32 font-size: 12px;
33 padding-top: 12px;
34 margin-bottom: 15px;
35 }
36 ul li a.fli {
37 }
38 #tabOne{
39 width: 122px;
40 opacity: 0;
41 }
42 #tabTwo{
43 padding-left: 102px;
44 }
45 #tabCon {
46 clear: both;
47 }
48 #tabCon p a{
49 color: #FFF2D5;
50 }
51 div div p{
52 font-size: 12px;
53 margin: 10px 0 0 20px;
54 width: 440px;
55 }
56 #bigPara{
57 font-size: 16px;
58 color: #FFF2D5;
59 border-bottom: 1px dotted #FFF2D5;
60 padding-bottom: 5px;
61 }
62 #tabCon div {
63 display:none;
64 }
65 #tabCon div.fdiv {
66 display:block;
67 }
68 </style>
69 </head>
70 <body>
71 <div id="tanContainer">
72 <div id="tab">
73 <ul>
74 <li><a class="fli" href="#" id="tabOne">新闻</a></li>
75 <li><a href="#" id="tabTwo">公告</a></li>
76 <li><a href="#">学术</a></li>
77 <li><a href="#">交流</a></li>
78 <li><a href="#">文体</a></li>
79 </ul>
80 </div>
81 <div id="tabCon">
82 <div class="fdiv">
83 <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p>
84 <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p>
85 <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p>
86 <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p>
87 <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p>
88
89 </div>
90 <div>
91 <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p>
92 <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p>
93 <p><a>我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)</a></p>
94 <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p>
95 <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p>
96 <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p>
97 </div>
98 <div>内容三</div>
99 <div>内容四</div>
100 <div>内容五</div>
101 </div>
102 </div>
103 </body>
104 <script>
105 var tabs=document.getElementById("tab").getElementsByTagName("li");
106 var divs=document.getElementById("tabCon").getElementsByTagName("div");
107
108 for(var i=0;i<tabs.length;i++){
109 tabs[i].onmouseover=function(){change(this);}
110 }
111
112 function change(obj){
113 for(var i=0;i<tabs.length;i++){
114 if(tabs[i]==obj){
115 tabs[i].className="fli";
116 divs[i].className="fdiv";
117 if(i==0){
118 document.getElementById("tanContainer").style.backgroundPosition="0 0"
119 }else{
120 document.getElementById("tanContainer").style.backgroundPosition="0 -210px"
121 }
122 }else{
123 tabs[i].className="";
124 divs[i].className="";
125 }
126 }
127 }
128 </script>
129 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style>
6 *{
7 padding: 0;
8 margin: 0;
9 }
10 body{
11 font-family: Arial,Verdana,sans-serif,"宋体";
12 }
13 li{
14 list-style: none;
15 float:left;
16 }
17 a{
18 text-decoration: none;
19 color: #ffeec6;
20 }
21 #tanContainer{
22 height: 210px;
23 width: 470px;
24 background: url(homeinfo-trans-bg.png);
25 overflow: hidden;
26 color: #ffeec6;
27 }
28 #tanContainer li a{
29 height: 25px;
30 display: inline-block;
31 margin-left: 18px;
32 font-size: 12px;
33 padding-top: 12px;
34 margin-bottom: 15px;
35 }
36 ul li a.fli {
37 }
38 #tabOne{
39 width: 122px;
40 opacity: 0;
41 }
42 #tabTwo{
43 padding-left: 102px;
44 }
45 #tabCon {
46 clear: both;
47 }
48 #tabCon p a{
49 color: #FFF2D5;
50 }
51 div div p{
52 font-size: 12px;
53 margin: 10px 0 0 20px;
54 width: 440px;
55 }
56 #bigPara{
57 font-size: 16px;
58 color: #FFF2D5;
59 border-bottom: 1px dotted #FFF2D5;
60 padding-bottom: 5px;
61 }
62 #tabCon div {
63 display:none;
64 }
65 #tabCon div.fdiv {
66 display:block;
67 }
68 </style>
69 </head>
70 <body>
71 <div id="tanContainer">
72 <div id="tab">
73 <ul>
74 <li><a class="fli" href="#" id="tabOne">新闻</a></li>
75 <li><a href="#" id="tabTwo">公告</a></li>
76 <li><a href="#">学术</a></li>
77 <li><a href="#">交流</a></li>
78 <li><a href="#">文体</a></li>
79 </ul>
80 </div>
81 <div id="tabCon">
82 <div class="fdiv">
83 <p id="bigPara"><a href="#">塞浦路斯总统尼科斯·阿纳斯塔西亚迪斯到访人民大学 获...</a></p>
84 <p><a href="#" title="中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)">中国人民大学开展专题教育 弘扬焦裕禄精神 践行“三严三实”(2015-10-25)</a></p>
85 <p><a href="#">中国人民大学认真落实党风廉政建设主体责任和监督责任(2015-10-23)</a></p>
86 <p><a href="#">中国人民大学第四届体育文化节开幕 2015年新生运动会举行(2015-10-18)</a></p>
87 <p><a href="#">中国人民大学“一带一路”经济研究院首席顾问聘任仪式举行 土库曼斯坦驻华大使拉</a></p>
88
89 </div>
90 <div>
91 <p><a>2015-2016学年第一学期第8周校领导接待日安排...(2015-10-22)</a></p>
92 <p><a>关于举办中国人民大学第二届青年管理干部岗位技能竞赛的...(2015-09-30)</a></p>
93 <p><a>我校第十六门中国大学视频公开课上线，请大家积极关注...(2015-10-26)</a></p>
94 <p><a>关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知...(2015-10-23)</a></p>
95 <p><a>关于举办中国人民大学第四届教工羽毛球“1+1”团体联...(2015-10-23)</a></p>
96 <p><a>中国人民大学MOOCs课程录制演播厅设备购置项目中标...(2015-10-23)</a></p>
97 </div>
98 <div>内容三</div>
99 <div>内容四</div>
100 <div>内容五</div>
101 </div>
102 </div>
103 </body>
104 <script>
105 var tabs=document.getElementById("tab").getElementsByTagName("li");
106 var divs=document.getElementById("tabCon").getElementsByTagName("div");
107
108 for(var i=0;i<tabs.length;i++){
109 tabs[i].onmouseover=function(){change(this);}
110 }
111
112 function change(obj){
113 for(var i=0;i<tabs.length;i++){
114 if(tabs[i]==obj){
115 tabs[i].className="fli";
116 divs[i].className="fdiv";
117 if(i==0){
118 document.getElementById("tanContainer").style.backgroundPosition="0 0"
119 }else{
120 document.getElementById("tanContainer").style.backgroundPosition="0 -210px"
121 }
122 }else{
123 tabs[i].className="";
124 divs[i].className="";
125 }
126 }
127 }
128 </script>
129 </html>
此实例是很简单也很常见的tab切换，js中多了一点的就是改变了背景图片的位置，其他的就是简单的样式。
二、上一篇讲了不用js，用input:checked来实现tab切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：
鼠标点击HTML/CSS时的效果
鼠标点击AJAX时的效果
完整代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>input:checked实现tab切换</title>
6 <style>
7 .tabs{
8 color: #FFF;
9 font-family: "微软雅黑";
10 }
11 input{
12 opacity: 0;/*隐藏input的选择框*/
13 }
14 input:checked+label{
15 padding-bottom: 6px;
16 font-weight: bold;
17 }
18 label{
19 cursor: pointer;/*鼠标移上去变成手状*/
20 float: left;
21
22 width: 120px;
23 line-height: 40px;
24 margin-right: 5px;
25 text-align: center;
26 }
27 .tabs label:nth-of-type(1){
28 background: #5eb0de;
29 }
30 .tabs label:nth-of-type(2){
31 background: #86cad7;
32 }
33 .tabs label:nth-of-type(3){
34 background: #e9bab3;
35 }
36 .tabs label:nth-of-type(4){
37 background: #a8c194;
38 }
39 label:hover{
40 font-weight: bold;
41 }
42 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
43 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){
44 opacity: 1;
45 background: #5eb0de;
46 -webkit-transition: .3s;
47 }
48 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
49 opacity: 1;
50 background: #86cad7;
51 -webkit-transition: .3s;
52 }
53 .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){
54 opacity: 1;
55 background: #e9bab3;
56 -webkit-transition: .3s;
57 }
58 .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){
59 opacity: 1;
60 background: #a8c194;
61 -webkit-transition: .3s;
62 }
63 .panel{
64 opacity: 0;
65 position: absolute;/*使内容区域位置一样*/
66
67 height: 200px;
68 width: 455px;
69 margin-top: 25px;
70 padding: 0 20px;
71 }
72 </style>
73 </head>
74 <body>
75 <div class="tabs">
76 <input checked id="one" name="tabs" type="radio">
77 <label for="one">HTML/CSS</label>
78
79 <input id="two" name="tabs" type="radio">
80 <label for="two">JavaScript</label>
81
82 <input id="three" name="tabs" type="radio">
83 <label for="three">AJAX</label>
84
85 <input id="four" name="tabs" type="radio">
86 <label for="four">Sever Side</label>
87
88 <div class="panels">
89 <div class="panel">
90 <h2>HTML文本标签语言</h2>
91 <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p>
92 </div>
93
94 <div class="panel">
95 <h2>JavaScript脚本语言</h2>
96 <p>JavaScript 是世界上最流行的脚本语言。<br/>
97 JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
98 JavaScript 被设计为向 HTML 页面增加交互性。
99 </p>
100 </div>
101
102 <div class="panel">
103 <h2>AJAX阿贾克斯</h2>
104 <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
105 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
106 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
107 </p>
108 </div>
109
110 <div class="panel">
111 <h2>Sever Side服务器脚本</h2>
112 <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
113 ASP 是创建动态交互性网页的强大工具。<br/>
114 ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/>
115 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
116 VBScript 是微软公司出品的脚本语言。
117 </p>
118 </div>
119
120 </div>
121 </div>
122 </body>
123 </html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>input:checked实现tab切换</title>
6 <style>
7 .tabs{
8 color: #FFF;
9 font-family: "微软雅黑";
10 }
11 input{
12 opacity: 0;/*隐藏input的选择框*/
13 }
14 input:checked+label{
15 padding-bottom: 6px;
16 font-weight: bold;
17 }
18 label{
19 cursor: pointer;/*鼠标移上去变成手状*/
20 float: left;
21
22 width: 120px;
23 line-height: 40px;
24 margin-right: 5px;
25 text-align: center;
26 }
27 .tabs label:nth-of-type(1){
28 background: #5eb0de;
29 }
30 .tabs label:nth-of-type(2){
31 background: #86cad7;
32 }
33 .tabs label:nth-of-type(3){
34 background: #e9bab3;
35 }
36 .tabs label:nth-of-type(4){
37 background: #a8c194;
38 }
39 label:hover{
40 font-weight: bold;
41 }
42 /*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/
43 .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1){
44 opacity: 1;
45 background: #5eb0de;
46 -webkit-transition: .3s;
47 }
48 .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){
49 opacity: 1;
50 background: #86cad7;
51 -webkit-transition: .3s;
52 }
53 .tabs input:nth-of-type(3):checked~.panels .panel:nth-child(3){
54 opacity: 1;
55 background: #e9bab3;
56 -webkit-transition: .3s;
57 }
58 .tabs input:nth-of-type(4):checked~.panels .panel:nth-child(4){
59 opacity: 1;
60 background: #a8c194;
61 -webkit-transition: .3s;
62 }
63 .panel{
64 opacity: 0;
65 position: absolute;/*使内容区域位置一样*/
66
67 height: 200px;
68 width: 455px;
69 margin-top: 25px;
70 padding: 0 20px;
71 }
72 </style>
73 </head>
74 <body>
75 <div class="tabs">
76 <input checked id="one" name="tabs" type="radio">
77 <label for="one">HTML/CSS</label>
78
79 <input id="two" name="tabs" type="radio">
80 <label for="two">JavaScript</label>
81
82 <input id="three" name="tabs" type="radio">
83 <label for="three">AJAX</label>
84
85 <input id="four" name="tabs" type="radio">
86 <label for="four">Sever Side</label>
87
88 <div class="panels">
89 <div class="panel">
90 <h2>HTML文本标签语言</h2>
91 <p>HTML 是通向 WEB 技术世界的钥匙。HTML 非常容易学习！你会喜欢它的！</p>
92 </div>
93
94 <div class="panel">
95 <h2>JavaScript脚本语言</h2>
96 <p>JavaScript 是世界上最流行的脚本语言。<br/>
97 JavaScript 是属于 web 的语言，它适用于PC、笔记本电脑、平板电脑和移动电话。<br/>
98 JavaScript 被设计为向 HTML 页面增加交互性。
99 </p>
100 </div>
101
102 <div class="panel">
103 <h2>AJAX阿贾克斯</h2>
104 <p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。<br/>
105 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。<br/>
106 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
107 </p>
108 </div>
109
110 <div class="panel">
111 <h2>Sever Side服务器脚本</h2>
112 <p>SQL 是用于访问和处理数据库的标准的计算机语言。<br/>
113 ASP 是创建动态交互性网页的强大工具。<br/>
114 ADO 指 ActiveX 数据对象（ActiveX Data Objects）。<br/>
115 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。<br/>
116 VBScript 是微软公司出品的脚本语言。
117 </p>
118 </div>
119
120 </div>
121 </div>
122 </body>
123 </html>
本文链接：几个不同的tab切换示例，转载请注明。