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 website说，它已不再维护：

虽然Thickbox有它的一天，但事实并非如此保持不变，所以我们建议你使用了一些替代品。

由于jQuery UI Dialog被列为其中一种备选方案AND 你已经在使用jQuery UI，我建议切换到 jQuery UI对话框。该对话框将使您在组合中没有问题用标签。

Answer 2

Thickbox现在很老了，并且在任何较新版本的Jquery（1.4 +）中使用它都会出现不稳定行为。

我建议移动到colorbox作为替代，非常相似的功能，同样易于设置。

jQuery选项卡无法在thickbox中运行

2 个答案: