By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,961 Members | 1,332 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,961 IT Pros & Developers. It's quick & easy.

I have crated tab link menu in ""Magento header""...when click on link color will cha

P: 2
I have crated tab link menu in ""Magento header""...when click on link color will change and after click on another link color change and previous link color back to original...I have created javascript and css please look ..this code work fine when we are not providing href link Thanks in Advance


HTML code::
Expand|Select|Wrap|Line Numbers
  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>

Javascript code::
Expand|Select|Wrap|Line Numbers
  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. .selected{
  82.     border: 1px solid #888;
  83.     background-color: #white;
  84.     background-image:none;
  85. }
  86. </style>
Jun 20 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.