Jquery 日历和标签滑动 div 冲突

Question

大家好，我正在尽我所能找出解决我似乎遇到的这个问题的另一种方法。在我的网站上，我有一个 jquery 日历和一个 jquery div 标签滑块（这个：http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html）。

问题与 DIV 标签有关。日历在 ID 为“日历”的 DIV 中加载。选项卡的 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 以使日历正常工作？我尝试用“span”或“p”替换所有 div，但这似乎根本不起作用。

任何帮助都会很棒，因为我被困在这个问题上，如果没有解决它就无法继续前进！ :)

大卫

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