jQuery 选项卡在厚盒内不起作用

Question

我正在开展一个项目，其中我有一个包含“案例研究”的网站，详细信息显示在一个厚盒子中。 现在，该内容被分成 3 个 jQuery 选项卡，它们在空白页面中工作得很好，但在这个厚盒子里，它们就不行了。

<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="result" 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>

Answer 1

thickbox 网站 表示，它不再维护：

虽然 Thickbox 曾经有过辉煌，但事实并非如此
维护时间更长，所以我们建议
您使用一些替代方案。

由于 jQuery UI 对话框 被列为这些替代方案之一并且
你已经在使用 jQuery UI，我建议切换到
jQuery UI 对话框。该对话框不会给您带来任何组合问题
与选项卡。

Answer 2

Thickbox 现在已经相当老了，与任何较新版本的 Jquery (1.4 +) 一起使用它会出现不稳定的行为。

我建议使用 colorbox 作为替代方案，功能非常相似，而且设置也很容易。