自己写了一个tab选项卡的切换，感觉还不错，跟大家分享一下。
一、点击切换
页面效果：
html页面：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tab面板切换</title>
<style>
.content{width: 1000px;height: 500px;margin: 0 auto;border: 1px solid #ccc}
#sel_ul{width: 100%;text-align: center;overflow: hidden;border: 1px solid #ccc;}
#sel_ul li{display: inline-block;width: 75px;height: 75px;border-right: 1px solid #ccc;cursor: pointer;}
img{width: 100%;height: auto;}
.banner{width: 1000px;height: 400px;display: none;}
.on{display: block;}
</style>
</head>
<body>
<div class="content">
<div id="sel_ul">
<li><img src="img/shap_1.png" ></li>
<li><img src="img/shap_3.png" ></li>
<li><img src="img/shap_4.png" ></li>
</div>
<div class="banner on">aaaa</div>
<div class="banner">bbbb</div>
<div class="banner">cccc</div>
</div>
</body>
</html>
js代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65var ChangeNode=function(b_img_src,g_img_src,target,banner_t){
this.blue_img_src=b_img_src;//点亮的图片
this.gray_img_scr=g_img_src;//未点亮的灰色图片
this.img_li=target;//包含img标签的li容器
this.banner_tartet=banner_t;//banner面板
}
/*
@news:新的ChangeNode对象
@old：与news相对
* */
function changeImg(news,old)
{
if(old!=null)
{
old.img_li.querySelector("img").src=old.gray_img_scr;
old.banner_tartet.className="banner";
}
news.img_li.querySelector("img").src=news.blue_img_src;
news.banner_tartet.className="banner on";
}
(function(){
if(document.getElementById){
if(!document.getElementById("sel_ul")){
return false;
}
}
var sel_ul=document.getElementById("sel_ul"),
sel_li=sel_ul.querySelectorAll("li"),
li_len=sel_li.length || sel_ul.childNodes.length,//获取子元素的长度
banner_list=document.querySelectorAll(".banner");
var changeImgFooPool=new Array();
changeImgFooPool[0]=new ChangeNode("img/shap_1_sel.png","img/shap_1.png",sel_li[0],banner_list[0]);
changeImgFooPool[1]=new ChangeNode("img/shap_3_sel.png","img/shap_3.png",sel_li[1],banner_list[1]);
changeImgFooPool[2]=new ChangeNode("img/shap_4_sel.png","img/shap_4.png",sel_li[2],banner_list[2]);
var index=-1;
for(var i=0;i<li_len;i++){
index=index+1;
sel_li[i].setAttribute("index",index);
}
var currentTarget=null;
currentTarget=changeImgFooPool[0];
changeImg(currentTarget,null);
sel_ul.onclick=function(e){
var evt=e||window.event;
var target=evt.target||evt.srcElement;
var temp=null;
if(target.nodeName.toLowerCase()=="img"){
for(var i=0;i<li_len;i++) {
if(target.parentNode==changeImgFooPool[i].img_li){
temp=changeImgFooPool[i];
break;
}
}
changeImg(temp,currentTarget);
currentTarget=temp;
}
}
})();
二、鼠标滑过切换
页面预览：
页面代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab滑过切换</title>
<style>
*{
padding: 0;
margin: 0 auto;
}
ul ,li{list-style: none;}
.all{
width: 280px;
height: 150px;
border: 1px solid #666666;
}
.notic-tit{
width: 280px;
height: 40px;
line-height: 40px;
background: #CCCCCC;
font-size: 16px;
text-align: center;
}
.notic-tit ul li{
float: left;
width: 68px;
height:39px;
border-bottom: 1px solid #CCCCCC;
padding: 0 1px;
}
.notic-tit ul li.select{
background: white;
font-weight: bolder;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-color:white ;
color: orange;
padding: 0;
}
.content-inner{ width: 280px;margin: 20px;}
</style>
</head>
<body>
<div class="all">
<div class="notic-tit">
<ul>
<li class="select"><a>娱乐</a></li>
<li ><a>体育</a></li>
<li ><a>购物</a></li>
<li ><a>美食</a></li>
</ul>
</div>
<div id="content">
<div class="content-inner" style="display: block;">
<p>呵呵而后 娱乐</p>
</div>
<div class="content-inner" style="display: none;">
<p>呵呵而后 体育</p>
</div>
<div class="content-inner" style="display: none;">
<p>呵呵而后 购物</p>
</div>
<div class="content-inner" style="display: none;">
<p>呵呵而后 美食</p>
</div>
</div>
</div>
<script>
window.onload=function(){
var notic_tit=document.querySelector(".notic-tit");
var li=notic_tit.getElementsByTagName("li");
var content_inner=document.getElementsByClassName("content-inner");
for(var i=0;i<li.length;i++){
li[i].id=i;
li[i].onmouseover=function(){
for(var j=0;j<li.length;j++){
li[j].className="";
content_inner[j].style.display="none";
}
this.className="select";
content_inner[this.id].style.display="block";
}
}
}
</script>
</body>
</html>
因为js没有像jQuery有addClass，removeClass之类的方法，我在网上看到用js实现这方面的方法，记录一下，方便以后使用。1
2
3
4
5
6
7
8
9
10
11
12
13
14function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) {
obj.className += " " + cls;
}
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}