2

いくつかの単純なタブを作成しました。クリックすると、非表示のdivが表示されます。とてもシンプルです。IEを除いて、すべてうまく機能します。何らかの理由で、jQuery .show（）関数を使用していても、非表示のdivをdisplay：blockに設定せず、非表示のままにしておくだけで、非常にイライラします。

ページ例：http ：//www.puc.edu/alumni/give-puc

タブのjQuery：

$('#teamTabs li').click(function() {
 $('#teamTabs li').removeClass('selected');
 $(this).addClass('selected');
 $('.teamTab').hide();
 var id = $(this).attr('id');
 if (id == 'teamTab1') {
  $('#team1').show();
 } else if (id == 'teamTab2') {
  $('#team2').show();
 } else if (id == 'teamTab3') {
  $('#team3').show();
 } else if (id == 'teamTab4') {
  $('#team4').show();
 }//end else if

 return false;

});//end click

IEがdivをdisplay：blockに設定しない理由はありますか？

4

2 に答える 2

2

問題が他の場所にあることはすでにわかっていると思いますが、後でこれを見つけた他の人のために（そしてこれを無回答リストから外すために）、コードをかなりスリム化/簡素化できます：

$('#teamTabs li').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  $('.teamTab').hide();
  $('#team'+ this.id.replace('teamTab','')).show();
  return false;
});
于 2010-11-07T11:37:00.860 に答える
1

同様の問題がありました。IEが実際に表示をブロックに変更していることがわかりましたが、各display:none;ブロックにもvisibility:hidden;

次のようにして、要素を正しく表示することができました。

$('#team1').show(); // shows for all browsers but IE
if($.browser.msie){
   $('#team1').css({"visibility":"visible"});
}

HTML を非表示にする可能性のある 2 つの CSS 要素に問題を絞り込んだ後、2 つのアラートを使用してこれを見つけました。および可視性:非表示。

直後にこのアラートを実行すると保証されます$('#team1').show();

alert( $('#team1').css("display"));あなたのディスプレイはブロックとアラート( $('#team1').css("visibility")); になります。あなたの可視性は隠されます。

CSSで「なし」の表示に設定され、Jqueryを介して変更されると、IEはブロックを自動的に非表示にするようです。また、これは display:block; として定義されている要素の問題ではないようです。これらの要素は、CSS で最初に定義している限り、常に問題ありません。

これが、この問題を抱えている他の誰かに役立つことを願っています:)

于 2010-11-08T20:33:47.497 に答える