IE no funciona con jQuery .show ()

Question

Construí algunas pestañas simples que, cuando se hace clic, muestran un div oculto. Muy simple. Todo funciona bien, excepto en IE. Por alguna razón, aunque estoy usando la función jQuery .show (), no configurará el div oculto para mostrar: bloque, pero simplemente lo deja oculto, y es muy frustrante.

Página de ejemplo: http://www.puc.edu/alumni/give-puc

jQuery para pestañas:

$('#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

¿Alguna idea de por qué IE no configuraría el div para mostrar: bloque?

Answer 1

Me doy cuenta de que ya has descubierto que el problema estaba en otra parte, pero para otros que lo encuentren más tarde (y para sacar esto de la lista de no respuestas), puedes reducir / simplificar un poco tu código:

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

Answer 2

Tuve un problema similar. Descubrí que IE en realidad estaba cambiando la visualización para bloquear, pero también hizo que cada display: none; block tuviera visibility:hidden;

Pude hacer que mis elementos se muestren correctamente haciendo lo siguiente:

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

Encontré esto usando dos alertas después de reducir mi problema a los dos posibles elementos CSS que podrían ocultar mi HTML: display: none; y visibilidad: oculta.

Garantizó que si hace esta alerta justo después de $('#team1').show();

alert ($ ('# team1'). css (" display ")); su pantalla se bloqueará y alert ($ ('# team1'). css (" visibilidad ")); tu visibilidad estará oculta.

Parece que IE oculta automáticamente los bloques cuando se configuran con una visualización de "ninguno" en el CSS y luego cambió a través de Jquery. También parece que esto no es un problema para los elementos que se definen como display: block; Estos elementos siempre deben estar bien siempre que los haya definido primero en el CSS.

Espero que esto ayude a cualquier otra persona que tenga este problema :)