jQuery tabs not working inside a thickbox

I´m working on a project, where i got a site with "case studies" and the details are show within a thickbox. Now, this content is split into 3 jQuery tabs, that work just fine in a blank page, but inside this thickbox, they don´t.

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/estilos.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/functions.js" ></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>  
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js" ></script>  
<script type="text/javascript" src="js/thickbox.js" ></script>  


<div id="todos">
<div id="titCuerpo"> Case studies
</div>
<div id="cuerpo">
<a href="#" class="toggleLink"><img src="imgs/arrowDown.png" align="bottom"/>&nbsp;Case: Community-based advocacy<br /><br /></a>
<div class="toggle" title='<img src="imgs/case.gif"> Community-based advocacy'><span style="color:#3e3e3e; font-weight:bold">
<ul class="htabs">
<li>
<a href="#situation"><div id="sit" style="background-image:url(imgs/menuOut_01.gif); background-repeat:no-repeat; width:91px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
<li>
<a href="#action"><div id="act" style="background-image:url(imgs/menuOut_02.gif); background-repeat:no-repeat; width:97px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
<li>
<a href="#result"><div id="res" style="background-image:url(imgs/menuOut_03.gif); background-repeat:no-repeat; width:90px; height:31px; float:left; display:block">&nbsp;</div></a>
</li>
</ul>
<div class="tabs">
<div id="situation" class="tab">
aaa
</div>
<div id="action" class="tab">
aaa
</div>
<div id="res开发者_如何学运维ult" class="tab">
aaa
</div>
</div>

<div></div>
</div>

<script>
$(document).ready(function() {
 $('.toggle').hide();


 $('.toggleLink').click(function() {


 tb_show($(this).next('.toggle').attr('title'),'TB_inline?height=300&amp;width=500');
 $('#TB_ajaxContent').html($(this).next('.toggle').html());


 return false;

 });

});


 remarcarSec('nav2');remarcarMenu("bot1");

jQuery(document).ready(function(){
 jQuery(".tab:not(:first)").hide();

 jQuery(".tab:first").show();

 jQuery(".htabs a").click(function(){
 stringref = jQuery(this).attr("href").split('#')[1];
 jQuery('.tab:not(#'+stringref+')').hide();
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 jQuery('.tab#' + stringref).fadeIn();
 return false;
 });

});


</script>

---

The thickbox website says, that it is no longer maintained:

While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.

Since the jQuery UI Dialog is listed as one of these alternatives AND you are using jQuery UI already, I would suggest switching to the jQuery UI dialog. The dialog will cause you no problems in combination with the tabs.

---

Thickbox is now quite old and using it with any newer versions of Jquery (1.4 +) will case erratic behaviour.

I would recommend moving to colorbox as an alternative, very similar functionality and just as easy to set-up.