我在"Magento标题"中创建了选项卡链接菜单...单击链接时,颜色将改变

我在""Magento Header""中创建了标签链接菜单...当点击链接颜色时,链接颜色会改变,点击另一个链接后,链接颜色会改变,以前的链接颜色会恢复到原来的颜色...我已经创建了javascrip和css,请看..这个代码工作得很好,当我们没有提供HREF链接时,提前谢谢
HTML码::

选择 | 换行 | 行号
  1. <ul id="navigation"> <li><a href="http://bytes.com/submit/g/#"><span>HOME</span></a></li> <li><a href="http://bytes.com/submit/g/#"><span>ABOUT</span></a></li> <li><a href="http://bytes.com/submit/g/#"><span>CONTACT</span></a></li> </ul>

脚本代码::

选择 | 换行 | 行号
  1. <script>
  2.  
  3. $(function() {
  4.     $('#navigation li').click(function() {
  5.             $('#navigation li').removeClass('selected');
  6.             $(this).addClass('selected');
  7.             //$('a', this).addClass('selected');
  8.  
  9.     });
  10. });
  11. </script>
  12.  
  13.  
  14. css code::
  15.  
  16. <style type="text/css">
  17. #navigation a
  18. {
  19.     background: url("http://i52.tinypic.com/spxfdw.png") no-repeat scroll 0 0 transparent;
  20.     color: #000000;
  21.     height: 43px;
  22.     list-style: none outside none;
  23.     padding-left: 10px;
  24.     text-align: center;
  25.     text-decoration: none;
  26.     width: 116px;
  27. }
  28.  
  29. #navigation a span
  30. {
  31.     padding-right: 10px;
  32.     padding-top: 15px;
  33. }
  34.  
  35. #navigation a, #navigation a span
  36. {
  37.     display: block;
  38.     float: left;
  39.  
  40. }
  41.  
  42. /* Hide from IE5-Mac \*/
  43. #navigation a, #navigation a span
  44. {
  45.     float: none
  46. }
  47. /* End hide */
  48.  
  49. #navigation a:hover
  50. {
  51.  
  52.     background: url('http://i51.tinypic.com/2iih9c9.png') no-repeat scroll 0 0 transparent;
  53.     color: #000000;
  54.     height: 43px;
  55.     list-style: none outside none;
  56.     padding-left: 10px;
  57.     text-decoration: none;
  58.     width: 116px;
  59.     text-align:center
  60. }
  61.  
  62. #navigation a:hover span
  63. {
  64.     background: url(right-tab-hover.gif) right top no-repeat;
  65.     padding-right: 10px
  66. }
  67.  
  68. #navigation ul
  69. {
  70.     list-style: none;
  71.     padding: 0;
  72.     margin: 0
  73. }
  74.  
  75. #navigation li
  76. {
  77.     float: left;
  78.     list-style: none outside none;
  79.     margin: 0;
  80. } 
  81.  
  82. .selected{
  83.     border: 1px solid #888;
  84.     background-color: #white;
  85.     background-image:none;
  86. }
  87. </style>

标签: Javascript

添加新评论