0

こんにちは、私が遭遇したと思われるこの問題を回避する別の方法を見つけようと最善を尽くしています。私のウェブサイトには、jquery カレンダーと jquery div タブ スライダーがあります (これ: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html )。

問題は DIV タグで発生します。カレンダーは、ID が「calendar」の 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>

カレンダーが機能するように DIV を非表示にする必要がないように、タブの JavaScript コードを変更するにはどうすればよいですか? すべての div を「span」または「p」に置き換えようとしましたが、まったく機能していないようです。

私はこれに行き詰まっており、解決しないとこれ以上先に進むことができないので、どんな助けも素晴らしいでしょう! :)

デビッド

4

1 に答える 1

0

CSS ルールのオーバーライドを試してください。それを行うときは、セレクターをより具体的にする必要があり、オーバーライドするルールは元のルールの後にある必要があります。

 .boxBody div {display:none;}
 .boxBody div.show {display:block;}
 .boxBody #category a {display:block;}
 /*Override for calendar*/
 .boxBody div#calender {display:block;}
于 2010-03-27T23:18:53.043 に答える