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;
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;
}