IE не работает с jQuery .show ()

Question

Я построил несколько простых вкладок, которые при нажатии показывают скрытый div. Очень просто. Все работает хорошо, кроме как в IE. По какой-то причине, хотя я использую функцию jQuery .show (), она не установит скрытый div для отображения: 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 для отображения: block?

Answer 1

У меня была похожая проблема. Я обнаружил, что IE на самом деле менял отображение на блокирующее, но в каждом блоке display:none; visibility:hidden;

Мне удалось правильно отобразить элементы, выполнив следующие действия:

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

Я нашел это с помощью двух предупреждений после сужения моей проблемы до двух возможных элементов CSS, которые могли скрыть мой HTML: display: none; и видимость: скрыто.

Гарантируется, что если вы сделаете это предупреждение сразу после $('#team1').show();

alert( $('#team1').css("display")); ваш дисплей будет заблокирован и alert ($ ('# team1'). css ("видимость")); Ваша видимость будет скрыта.

Похоже, что IE автоматически скрывает блоки, когда они установлены на отображение "none" в css, а затем изменены с помощью Jquery. Также кажется, что это не проблема для элементов, которые определены как display: block; Эти элементы всегда должны быть в порядке, если вы сначала определили их в CSS.

Надеюсь, что это поможет кому-то еще с этой проблемой:)

Answer 2

Я понимаю, что вы уже поняли, что проблема была в другом месте, но для других, обнаруживших это позже (и чтобы исключить это из списка «нет ответов»), вы можете немного уменьшить / упростить свой код:

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