IEはjQuery .show（）で動作しません

StackOverflow https://stackoverflow.com/questions/1440469

  •  10-07-2019
  •  | 
  •  

質問

いくつかの単純なタブを作成しました。クリックすると、非表示の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に設定しない理由は何ですか？

役に立ちましたか？

解決

すでに問題が他の場所にあることがわかっていることは承知していますが、他の人が後でこれを見つけた場合（およびこれを無回答リストから取り除くため）、コードをかなりスリム化/単純化できます：

$('#teamTabs li').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  $('.teamTab').hide();
  $('#team'+ this.id.replace('teamTab','')).show();
  return false;
});

他のヒント

同様の問題がありました。 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（＆quot; display＆quot;））; ディスプレイはブロックされ、 alert（$（ '＃team1'）。css（＆quot; visibility＆quot;））;可視性は非表示になります。

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top