Menu hover not work in many page

Menu hover not work in many page

I have a menu like this:
  2.         <div id="menu">
  3.             <ul>                                                                       
  4.                 <li><a href="" class="active tab">Home</a></li>
  5.                 <li><a href="about" class="tab">About</a></li>
  6.                 <li><a href="specials" class="tab">Specials</a></li>
  7.                 <li><a href="account" class="tab">Account</a></li>
  8.                 <li><a href="register" class="tab">Register</a></li>
  9.                 <li><a href="price" class="tab">Price</a></li>
  10.                 <li><a href="contact" class="tab">Contact</a></li>
  11.             </ul>
  12.         </div> <!-- end .menu -->   
Per page has one, there are some page (home, about ... example). I wrote css and js, too. Here is my js:
  1. <head> 
  2.     <meta http-equiv="ContentType" content="text/html; charset=utf8" /> 
  3.     <title>Hover Menu with jQuery and CSS</title> 
  4.     <link rel="stylesheet" type="text/css" href="style.css" /> 
  5.     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
  6.     <script type="text/javascript"> 
  7.         $(document).ready(function() { 
  8.             $('a.tab').click(function() { 
  9.                 $('.active').removeClass('active'); 
  10.                 $(this).addClass('active'); 
  11.             }); 
  12.         }); 
  13.     </script> 
  14. </head> 
But when I click about link, contact link, ...etc and the code doesn't work.   I know that when I click link, js reload.  What should I do? Thanks in advanced.