Jquery calendrier et onglet coulissant div clash

Question

Salut à tous, je fais de mon mieux pour trouver un autre moyen de contourner ce problème que j'ai l'air d'avoir rencontré. Sur mon site Web j'ai un calendrier de jquery et également un curseur de jquery div tab (ceci: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html).

Le problème entre en conflit avec la balise DIV. Le calendrier charge à l'intérieur d'un DIV avec un ID de «calendrier». Le CSS pour les onglets ont la DIV cachée:

CSS:

.boxBody div {display:none;} 
.boxBody div.show {display:block;} 
.boxBody #category a {display:block;} 

Et à cause de cela, le calendrier ne montre jamais sur la page. Cependant, si je commente ce code CSS ci-dessus, il apparaît mais ne couvre pas chaque section comme il se doit. En d'autres termes, tout est montré quand il devrait être caché jusqu'à ce que les onglets soient cliqués dessus pour le révéler.

code:

<script type="text/javascript"> 
$(document).ready(function() { 

$('#tabMenu > li').click(function(){  
    $('#tabMenu > li').removeClass('selected'); 
    $(this).addClass('selected'); 
    $('.boxBody div').slideUp('1500'); 
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); 
}).mouseover(function() { 
    $(this).addClass('mouseover'); 
    $(this).removeClass('mouseout'); 
}).mouseout(function() { 
    $(this).addClass('mouseout'); 
    $(this).removeClass('mouseover'); 
}); 

$('.boxBody #category li').mouseover(function() { 
    $(this).css('backgroundColor','#888'); 
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); 
}).mouseout(function() { 
    $(this).css('backgroundColor',''); 
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); 
}); 

$('.boxBody li').click(function(){ 
    window.location = $(this).find("a").attr("href"); 
}).mouseover(function() { 
    $(this).css('backgroundColor','#888'); 
}).mouseout(function() { 
    $(this).css('backgroundColor',''); 
}); 
}); 
</script> 

<div align="center"> 
<div class="Mainbox"> 
<ul id="tabMenu"> 
<div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div> 
<li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li> 
<li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li> 
<li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li> 
<li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li> 
<li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li> 
</ul> 

<div class="boxTop"></div> 
<div class="boxBody"> 

<div id="stats" class="show">   
     Just a test here.... 
</div> 

<div id="cal">    
    <div id='calendar'></div> 
</div> 

<div class="boxBottom"></div> 
</div> 
</div> 

Comment puis-je changer l'onglet code javascript afin qu'il n'a pas à cacher les DIV afin que le calendrier fonctionne? J'ai essayé de remplacer tous les div avec «span» ou «p», mais cela ne semble pas fonctionner du tout.

Toute aide serait super car je suis bloqué sur ça et je ne peux pas aller plus loin sans que ça soit résolu! :)

David

Answer 1

Essayez un remplacement dans vos règles CSS. Vous devez être aussi ou plus spécifique dans votre sélecteur lorsque vous faites cela et la règle primordiale doit être postérieure à la règle d'origine:

.boxBody div {display:none;} 
.boxBody div.show {display:block;} 
.boxBody #category a {display:block;} 
/*Override for calendar*/ 
.boxBody div#calender {display:block;}