Custom CSS menu, "Active" tab remains on 'Home' not the actual page

Question

I created this custom css menu, but when switching tabs, the "Active" tab design remains on the 'Home' link on the menu, rather than the actual page I'm on. Any idea how I an fix this?

HTML :

<ul class="menu">
    <li><a href="http://caribbeantl.com/"; class="active"><span>Home</span></a></li>
    <li><a href="http://caribbeantl.com/hotels/"><span>Testing post</span></a></li>
</ul>

CSS :

.menu {margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') repeat-x;}
.menu li {padding:0; margin:0; list-style:none; display:inline;}
.menu li a {float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -30px no-repeat;}
.menu li a span {line-height:30px; float:left; display:block; padding-right:15px; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -30px no-repeat;}
.menu li a:hover {background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span {background-position:100% -60px;}
.menu li a.active,
.menu li a.active:hover {line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span,
.menu li a.active:hover span {background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -90px no-repeat;}

Answer 1

HTML:

<div class="menu">
<ul>
  <li><a class="menuLink active" href="#">Home</a></li>
  <li> <a class="menuLink" href="#">Page1</a></li>
  <li><a class="menuLink" href="#">Page2</a></li>
  <li><a class="menuLink" href="#">Page3</a></li>
</ul>
</div>

css:

.menu
{
height:64px;
width:100%;
background-repeat:repeat-x;
text-align:center;
 }

.menuLink, .menuLink:visited
{
 color:#00000;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:70px;
height: 50px;
padding: 10px;
display:block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-color:aqua;
font-size: 26px;
}
.active{
background-color:aqua;
}
ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
}

​ jquery:

$('.menuLink').click(function(){
  $('a').removeClass('active');
  $(this).addClass('active');
});​

Live Demo http://jsfiddle.net/PYW35/