2

我构建了一些简单的选项卡，单击它们时会显示一个隐藏的 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？

4

2 回答 2

2

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

$('#teamTabs li').click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  $('.teamTab').hide();
  $('#team'+ this.id.replace('teamTab','')).show();
  return false;
});
于 2010-11-07T11:37:00.860 回答
1

我有一个类似的问题。我发现IE实际上是把显示改为block，但它也让每个display:none;block都有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"));您的显示将被阻止并警告（$('#team1').css("visibility")); 您的可见性将被隐藏。

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

希望这可以帮助其他有这个问题的人:)

于 2010-11-08T20:33:47.497 回答