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

Jquery日历和选项卡滑动div冲突

1 个答案: