日期:2014-05-17  浏览次数:20664 次

js和css控制鼠标略过和点击后的样式

源:http://blog.csdn.net/xn4545945/article/details/8498272

评:

一、js和css控制鼠标略过和点击后的样式

[html] view plaincopy
  1. <script?language="javascript">??
  2. document.onreadystatechange=function()?????//当页面状态改变时执行函数??
  3. {??
  4. if(document.readyState?==?"complete")?????????//当页面加载状态为完成时执行条件内容??
  5. ??
  6. {???
  7. ??var?li?=?document.getElementsByTagName("li");??//获取页面所有li节点??
  8. ??for(var?i=0;i<li.length;i++)?????????????????????????????????????//循环li节点??
  9. ??{??
  10. ???li[i].onclick=function(){?????????????????????????????????????????//为循环的li节点绑定?onclick事件??
  11. ????for(var?j=0;j<li.length;j++)??
  12. ????{??
  13. ?????li[j].style.backgroundColor="#FFF";??????????????????//将所有li背景颜色修改??
  14. ?????this.style.backgroundColor="#C0F";????????????????//将当前点击的li背景颜色修改??
  15. ????}??
  16. ???}??
  17. ??}??
  18. }??
  19. }??
  20. </script>??
  21. <ul>??
  22. <li>測試1</li>??
  23. <li>測試2</li>??
  24. ??
  25. <li>測試3</li>??
  26. <li>測試4</li>??
  27. ??