<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>鏈接背景變色</
title
>
<
style
type
=
"text/css"
>
ul{list-style:none;}
li,a{
width:150px;
height:30px;
text-align:center;
line-height:30px;
margin-bottom:10px;
background-color:#606;
color:white;
display:block;
}
a{text-decoration:none;}
</
style
>
<
script
type
=
"text/javascript"
>
function changeCss(obj,lis){
for(var i=0;i<
lis.length
;i++){
lis[i].style.backgroundColor = "#606";
}
obj.style.backgroundColor
=
"#F30"
;
}
window.onload
=
function
(){
var
box
=
document
.getElementById("box");
alinks
=
box
.getElementsByTagName("a");
for(var
i
=
0
;i<alinks.length;i++){
alinks[i]
.onclick
=
function
(){
changeCss(this,alinks)
}
}
}
</script>
</
head
>
<
body
>
<
ul
id
=
"box"
>
<
li
><
a
href
=
"#"
>螞蟻部落一</
a
></
li
>
<
li
><
a
href
=
"#"
>螞蟻部落二</
a
></
li
>
<
li
><
a
href
=
"#"
>螞蟻部落三</
a
></
li
>
<
li
><
a
href
=
"#"
>螞蟻部落四</
a
></
li
>
<
li
><
a
href
=
"#"
>螞蟻部落五</
a
></
li
>
</
ul
>
</
body
>
</
html
>