jQuery选项卡在厚框内不起作用答案

【问题标题】：jQuery tabs not working inside a thickboxjQuery选项卡在厚框内不起作用
【发布时间】：2010-10-04 20:45:57
【问题描述】：

我正在做一个项目，在那里我有一个带有“案例研究”的网站，详细信息显示在一个厚框内。现在，这个内容被分成了 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>

【问题讨论】：

标签： jquery tabs thickbox

【解决方案1】：

thickbox website 表示不再维护：

Thickbox 有它的日子，但它不是维护时间更长，所以我们建议你使用一些替代品。

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

【讨论】：

【解决方案2】：

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

我建议您使用 colorbox 作为替代方案，它的功能非常相似，而且设置也很简单。

【讨论】：