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

轉載于:https://www.cnblogs.com/l5580/p/5909277.html

總結

以上是生活随笔為你收集整理的例子：好友列表选中效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。