标签的类添加与删除

 
1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>div边框变化</title>
 6     <link rel="stylesheet" type="text/css" href="first.css" />
 7     <script type="text/javascript" >
 8     var i=0;
 9     function fun(num) {
10       //删除标签的类
11       var classVal1 = document.getElementById("im"+i).getAttribute("class");
12         classVal1 = " " + classVal1 + " ";
13         if (i==0) {
14            classVal1 = classVal1.replace("im02");
15        }else if (i==4){
16           classVal1 = classVal1.replace("im03");
17        } else{
18           classVal1 = classVal1.replace("im01");
19        }  
20       document.getElementById("im"+i).setAttribute("class",classVal1 );
21         
22         //增加标签的类
23         var classVal = document.getElementById("im"+num).getAttribute("class");
24         classVal = " " + classVal + " ";
25         if (num==0) {
26            classVal = classVal.concat("im02");
27        }else if (num==4){
28           classVal = classVal.concat("im03");
29        } else{
30           classVal = classVal.concat("im01");
31        }  
32       document.getElementById("im"+num).setAttribute("class",classVal );
33 
34        i=num;
35     }
36     </script>
37 </head>
38 
39 <body id="dv">
40  <div>
41    <img src="0.jpg" onclick="fun(0)" id="im0" />
42    <img src="1.jpg" onclick="fun(1)" id="im1" />
43    <img src="2.jpg" onclick="fun(2)" id="im2" />
44    <img src="3.jpg" onclick="fun(3)" id="im3" />
45    <img src="4.jpg" onclick="fun(4)" id="im4" />
46  </div>
47 </body>
48 </html>

*{
	padding:0;
	margin: 0;
}
img{
	float: left;
	width: 124px;
	height: 220px;
}
div{
	margin: 100px;
}
.im01{
	border-bottom: 3px solid red;
	border-top: 3px solid red;
}
.im02{
	border: 3px solid red;
	border-right: 0px;
}
.im03{
	border: 3px solid red;
	border-left: 0px;
}

标签的类添加与删除

推荐阅读