jQuery菜单选中代码,响应鼠标背景变色效果

[复制链接]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  5. <title>一个jquery菜单“选中”效果_烈火网</title>
  6. <style type="text/css">
  7. a{color:#666;text-decoration:none}
  8. ul {list-style-type:none;margin:0}
  9. li{border:1px solid #F69;width:120px}
  10. .selecthover{background-color:#F69}
  11. .lihover{background-color:#F69}
  12. </style>
  13. </head>
  14. <body>
  15. <ul id="Sub_Links">
  16. <li>
  17. <a href="#">板材</a>
  18. </li>
  19. <li>
  20. <a href="#">马赛克</a>
  21. </li>
  22. <li>
  23. <a href="#">拼花</a>
  24. </li>
  25. <li>
  26. <a href="#">台面板</a>
  27. </li>
  28. <li>
  29. <a href="#">洗手盆</a>
  30. </li>
  31. <li>
  32. <a href="#">壁炉</a>
  33. </li>
  34. <li>
  35. <a href="#">异形</a>
  36. </li>
  37. </ul>
  38. <br/>
  39. <ul id="Sub_Links">
  40. <li>
  41. <a href="#">板材</a>
  42. </li>
  43. <li>
  44. <a href="#">马赛克</a>
  45. </li>
  46. <li>
  47. <a href="#">拼花</a>
  48. </li>
  49. <li>
  50. <a href="#">台面板</a>
  51. </li>
  52. <li>
  53. <a href="#">洗手盆</a>
  54. </li>
  55. <li>
  56. <a href="#">壁炉</a>
  57. </li>
  58. <li>
  59. <a href="#">异形</a>
  60. </li>
  61. </ul>
  62. <script type="text/javascript" src="js/jquery-1.js"></script>
  63. <script>
  64. $("li").click(function(){
  65. $(this).addClass("selecthover").siblings().removeClass("selecthover");
  66. }).hover(function(){
  67. $(this).addClass("lihover");
  68. },function () {
  69. $(this).removeClass("lihover");
  70. })
  71. </script>
  72. </body>
  73. </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.dtyuanma.com/' target='_blank'>http://www.dtyuanma.com/</a></div>
复制代码


回复

使用道具 举报

精彩评论4

我也来看了,很不错,收藏了












微信号
微信号出售
买卖微信号
回复 支持 反对

使用道具 举报

非常高兴遇到这么好的帖子 谢谢












回复 支持 反对

使用道具 举报

也是支持,我代表大家顶你了












回复 支持 反对

使用道具 举报

好!谢谢!












回复 支持 反对

使用道具 举报

快速回复 返回顶部 返回列表