IE 不支持 jQuery .show()

Question

我构建了一些简单的选项卡，单击这些选项卡会显示隐藏的 div。很简单。除了 IE 之外，一切都运行良好。由于某种原因，即使我使用 jQuery .show() 函数，它也不会将隐藏的 div 设置为 display:block，而只是将其隐藏，这非常令人沮丧。

示例页面：http://www.puc.edu/alumni/give-puc

jQuery for tabs：

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

Answer 1

我意识到您已经发现问题出在其他地方，但对于其他人后来发现这个问题（并将其从无答案列表中删除），您可以大大减少/简化您的代码：

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

Answer 2

我有类似的问题。我发现 IE 实际上正在将显示更改为块，但它也使每个 display:none; 块具有 visibility:hidden;

我能够让我的元素正确显示通过执行以下操作：

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

在将问题范围缩小到两个可能隐藏 HTML 的 CSS 元素后，我通过使用两个警报发现了这一点：display:none;和可见性：隐藏。

保证如果您在 $('#team1').show(); 之后立即执行此警报

alert( $('#team1').css("display"));< /code> 您的显示将被阻止并且
警报（$（'#team1'）.css（“可见性”））;您的可见性将被隐藏。

似乎 IE 会自动隐藏块，当它们在 css 中设置为“none”显示，然后通过 Jquery 更改时。对于定义为 display:block; 的元素来说，这似乎不是问题。只要您首先在 CSS 中定义这些元素，就应该始终没问题。

希望这可以帮助其他遇到此问题的人:)