Javascript Problem

[shempsall2009]

Please can somebody tell me why this don't work. It shows on site but the Tabs don't change.

Thanks.

<style>
.tab-box { 
  border-bottom: 0px solid #DDD;
  padding-bottom:3px;
}
.tab-box a {
  border:0px solid #DDD;
  color:#666666;
  padding: 3px 15px;
  text-decoration:none;
  background-color: #eee;
}
.tab-box a.activeLink { 
  background-color: #fff; 
  border-bottom: 0; 
  padding: 3px 15px;
}
.tabcontent { border: 0px solid #ddd; border-top: 0;}
.hide { display: none;}
</style>

<div class="block">
<div class="blockhead">
 <div class="tab-box">  
    <a href="javascript:;" class="tabLink activeLink" id="cont-1">Tab 1</a> 
    <a href="javascript:;" class="tabLink " id="cont-2">Tab 2</a> 
    <a href="javascript:;" class="tabLink " id="cont-3">Tab 3</a> 
  </div>
 </div>
<div class="blockrow">
  <div class="tabcontent padding All" id="cont-1-1"> 
    This is content box one 
  </div>
   <div class="tabcontent padding All hide" id="cont-2-1"> 
    This is content box Two 
  </div> 
  <div class="tabcontent padding All hide" id="cont-3-1"> 
    This is content box Three 
  </div> 
</div>

<vb:literal>
<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;	  
      });
    });  
  });
</script>
</vb:literal>