JQuery календарь и вкладка скольжения Div столкновение

Question

Привет всем, я изо всех сил стараюсь найти другой способ обойти эту проблему, с которой я, похоже, столкнулся. На моем веб-сайте есть календарь jquery, а также ползунок вкладки div jquery (это: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html).

Проблема вступает в игру с тегом DIV. Календарь загружается в DIV с идентификатором «calendar». В CSS для вкладок скрыт DIV:

CSS:

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

И поэтому календарь никогда не отображается на странице. Однако, если я закомментирую этот код CSS выше, он обнаруживается, но не охватывает каждый раздел, как следует. Другими словами, все отображается, когда оно должно быть скрыто до тех пор, пока не будут нажаты вкладки, чтобы открыть его.

код:

 <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>

Как я могу изменить код JavaScript вкладки, чтобы он не должен был скрывать DIV, чтобы календарь работал? Я пытался заменить все элементы div на «span» или «p», но это, похоже, не работает вообще.

Любая помощь была бы великолепна, так как я застрял в этом и не смогу пойти дальше, если ее не решить! :)

David

Answer 1

Попробуйте переопределить в ваших правилах CSS. При этом вы должны быть более или более конкретны в своем селекторе, а правило переопределения должно быть после исходного правила:

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