2009-09-17 12 views
2

J'ai construit quelques onglets simples, qui, lorsqu'on clique dessus, montrent un div caché. Très simple. Tout fonctionne bien, sauf dans IE. Pour une raison quelconque, même si j'utilise la fonction jQuery .show(), elle ne définit pas la div masquée à afficher: block, mais la laisse juste cachée, et c'est très frustrant.IE ne fonctionne pas avec jQuery .show()

Exemple Page: http://www.puc.edu/alumni/give-puc

jQuery pour les onglets:

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

Toutes les idées pourquoi IE ne fixerait pas la div pour afficher: bloc?

+0

Quelle version de IE? Quelles versions avez-vous besoin de supporter? –

+0

Semble fonctionner correctement pour moi dans IE8 – Greg

+0

IE7 est ce qui ne fonctionne pas pour moi. –

Répondre

2

Je sais que vous avez déjà compris le problème était ailleurs, mais pour d'autres trouver plus tard (et pour obtenir ce hors aucune liste de réponses), vous pouvez perdre du poids/simplifier votre code un peu:

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

J'ai eu un problème similaire. J'ai trouvé que IE était réellement l'affichage change pour bloquer, mais il a également fait chaque bloc display:none; ont visibility:hidden;

j'ai pu obtenir mes éléments pour afficher correctement en procédant comme suit:

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

Je trouve cela par en utilisant deux alertes après avoir réduit mon problème aux deux éléments CSS possibles qui pourraient cacher mon code HTML: display: none; et visibilité: caché.

Garantis que si vous faites ce droit d'alerte après $('#team1').show();

alert($('#team1').css("display")); votre écran sera bloc et alerte ($ ('# team1') css ("visibilité").); votre visibilité sera cachée.

On dirait que IE cache automatiquement les blocs lorsqu'ils sont réglés sur "none" dans le css, puis modifiés via Jquery. Il semble également que ce n'est pas un problème pour les éléments définis comme display: block; Ces éléments devraient toujours être ok tant que vous les avez définis en premier dans le CSS.

Espérons que cela aide quelqu'un d'autre là-bas ayant ce problème :)

+0

Merci! Cela m'a beaucoup aidé –

+0

Glad it helps! – Ian