JQuery вкладки не работают внутри коробки - PullRequest
Новая
       11

JQuery вкладки не работают внутри коробки

2 голосов
/ 05 октября 2010

Я работаю над проектом, где у меня есть сайт с «тематическими исследованиями», и детали показаны в толстой коробке. Теперь этот контент разделен на 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>

Ответы [ 2 ]

2 голосов
/ 05 октября 2010

Сайт Thickbox сообщает, что он больше не поддерживается:

Несмотря на то, что у Thickbox был свой день, он больше не поддерживается, поэтому мы рекомендуем использовать некоторые альтернативы..

Поскольку в качестве одной из этих альтернатив указан jQuery UI Dialog И вы уже используете jQuery UI, я бы предложил перейти в диалоговое окно jQuery UI.Диалог не вызовет проблем в сочетании с вкладками.

1 голос
/ 07 апреля 2011

Thickbox теперь довольно старый, и использование его с любыми новыми версиями Jquery (1.4 +) приведет к ошибочному поведению.

Я бы порекомендовал перейти на colorbox как альтернативу, очень похожую функциональность и такую ​​же простую в настройке.

...