<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微軟雅黑; font-size:16px;}
.f{ width:200px; height:30px; background-color:#63C; color:white; text-align:center; line-height:30px; vertical-align:middle; margin-top:3px}
.f:hover{ cursor:pointer;}
</style>
?
<div style="width:200px; height:600px; margin-top:30px"> ? ???
<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">張三</div> ???
<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">李四</div> ???
<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">王五</div> ???
<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">趙六</div> ???
<div class="f" οnclick="Xuan(this)" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)" xz="0">馬七</div>????
</div>
?
<script type="text/javascript">
?
?function Xuan(a)
?{
??var attr = document.getElementsByClassName("f");
??
??for(var i=0;i<attr.length;i++)
??{
???attr[i].style.backgroundColor = "#63C";
???attr[i].setAttribute("xz","0");
??}
??a.setAttribute("xz","1");
??a.style.backgroundColor = "#F63";
?}
?
?function Bian(a)
?{
??var attr = document.getElementsByClassName("f");
??
??for(var i=0;i<attr.length;i++)
??{
???if(attr[i].getAttribute("xz")=="0")
???{
????attr[i].style.backgroundColor = "#63C";
???}
??}
??
??a.style.backgroundColor = "#F63";
?}
?
?
?function Hui(a)
?{
??var attr = document.getElementsByClassName("f");
??
??for(var i=0;i<attr.length;i++)
??{
???if(attr[i].getAttribute("xz")=="0")
???{
????attr[i].style.backgroundColor = "#63C";
???}
??}
?}
?
</script>
)
)
)
