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>
复制代码


回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源