大家好,我正在尽我所能找出解决我似乎遇到的这个问题的另一种方法。在我的网站上,我有一个 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,但这似乎根本不起作用。
任何帮助都会很棒,因为我被困在这个问题上并且如果没有解决它就无法继续前进!:)
大卫