Jquery 由隐藏div创建的空白

我有三个div包含在第四个div中

HTML:

CSS:

我使用jquery隐藏三个div中的两个，并根据单击的按钮显示一个div。三个div都是相对定位的，我移动了div 1、2和3，因此它们都显示在相同的位置，即单击一个按钮，div 2替换div 1

我遇到的问题是，div末尾下方显示的空白量似乎等于div的高度。例如，如果我单击按钮显示div id=1，则下方的空白量等于div id=1的高度

我认为这是因为将div向上移动了一个相对位置，但我不知道如何使用CSS或者是否需要使用jquery来纠正它

我在其他问题中找不到这个确切的问题，类似问题的任何解决方案都不起作用

以前有没有关于这个问题的建议或经验？提前感谢您的帮助和建议

编辑

我试图保持它的简单性，我在上面添加了一些代码。除了下面的空白，一切都很好

---

再次感谢。

这非常困难，因为您没有包含任何代码，但根据对问题的描述，我推测您正在隐藏元素。有两件事可以使用CSS“隐藏”元素（带或不带jQuery）：

隐藏 这将隐藏元素，但它仍将在布局中占用相同的空间，因为从技术上讲，它仍然存在

显示：无 这将完全从布局中删除元素，这意味着它不会影响布局（除非在构建时考虑了此元素）

我建议您尝试使用display:none方法，使用jQuery动态修改div的css，而不是使用stock hide（）和show（）函数

注：我想找到一个比w3傻瓜更好的链接，但目前我在工作，找不到

---

修订版1-Show（），Hide（）方法 我对代码进行了一些细微的修改，这些修改展示了您遇到的问题（因为您的代码对于任何其他可能看到并尝试它的人来说都不是即插即用的）。任何看小提琴的人都会看到，容器底部为隐藏元素预留了空间，如上面第1点所示

HTML

Javascript

      $('#d3show').click(function() {
          $('#d1').hide('slow', function() {
          // Animation complete.
      });
      $('#d2').hide('slow', function() {
        // Animation complete.
      });
      $('#d3').show('slow', function() {
       // Animation complete.
     });
     });

在上面的示例中，只有超链接3会触发动画

---

修订2-CSS方法 我现在在这里添加了css版本，这样您就可以轻松比较这两种方法：

上面唯一的变化是javascript区域。您将注意到，div中不再像show（）、hide（）方法那样保留额外的空间

Javascript:

    $('#d3show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'inline');
    });

    $('#d2show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'inline');
      $('#d3').css('display', 'none');
    });

    $('#d1show').click(function() {
      $('#d1').css('display', 'inline');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'none');
    });

---

这是非常困难的，因为您没有包含任何代码，但从问题的描述中，我推测您正在隐藏元素。有两件事可以使用CSS“隐藏”元素（带或不带jQuery）：

隐藏 这将隐藏元素，但它仍将在布局中占用相同的空间，因为从技术上讲，它仍然存在

显示：无 这将完全从布局中删除元素，这意味着它不会影响布局（除非在构建时考虑了此元素）

我建议您尝试使用display:none方法，使用jQuery动态修改div的css，而不是使用stock hide（）和show（）函数

注：我想找到一个比w3傻瓜更好的链接，但目前我在工作，找不到

---

修订版1-Show（），Hide（）方法 我对代码进行了一些细微的修改，这些修改展示了您遇到的问题（因为您的代码对于任何其他可能看到并尝试它的人来说都不是即插即用的）。任何看小提琴的人都会看到，容器底部为隐藏元素预留了空间，如上面第1点所示

HTML

Javascript

      $('#d3show').click(function() {
          $('#d1').hide('slow', function() {
          // Animation complete.
      });
      $('#d2').hide('slow', function() {
        // Animation complete.
      });
      $('#d3').show('slow', function() {
       // Animation complete.
     });
     });

在上面的示例中，只有超链接3会触发动画

---

修订2-CSS方法 我现在在这里添加了css版本，这样您就可以轻松比较这两种方法：

上面唯一的变化是javascript区域。您将注意到，div中不再像show（）、hide（）方法那样保留额外的空间

Javascript:

    $('#d3show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'inline');
    });

    $('#d2show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'inline');
      $('#d3').css('display', 'none');
    });

    $('#d1show').click(function() {
      $('#d1').css('display', 'inline');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'none');
    });

---

你能给我们看一些代码吗？如果没有一些代码，你很可能在这里找不到答案。请分享你的代码你是如何隐藏div的？请给出完整的代码示例。JSFIDLE会更好。我忘了包含容器的css代码，现在似乎无法添加它。这里是：#container2{位置：相对；左：0px；上：0px；宽度：自动；高度：自动；背景色：#FFFFFF；边框：脊线；宽度：968px；溢出：可见；填充：0px；页边距顶部：0px；页边距右侧：自动；页边距底部：0px；页边距左侧：自动；}您能给我们看一些代码吗？没有一些代码，你很可能在这里得不到答案。请分享你的代码你是如何隐藏div的？请给出完整的代码示例。JSFIDLE会更好。我忘了包含容器的css代码，现在似乎无法添加它。这里是：#container2{位置：相对；左：0px；上：0px；宽度：自动；高度：自动；背景色：#FFFFFF；边框：脊线；宽度：968px；溢出：可见；填充：0px；页边距顶部：0px；页边距右侧：自动；页边距底部：0px；页边距左侧：自动；}感谢您的建议。自从你发表评论后，我已经添加了代码。但是，显示“无”似乎不起作用。我按如下方式实现了它：函数ShowObjective（x）{$（'#feedback'）.css（'display'，'none'）；$（'#aboutPageImage'）.c

      #d1, #d2, #d3{
      position: relative;
      /*left: 180px;
      top: -720px;
      */
      height: auto;
      width: 510px;
      border-radius: 7px;
      padding: 5px;
      margin-top: 10px;
      margin-bottom: 50px;
      text-align: justify;
      margin-left: 10px;
      border: medium solid #000;  
      }

      #container { 
      position: relative;
      left: 0px; 
      top: 0px;
      width: auto; 
      height: auto; 
      background-color: #FFFFFF; 
      border: ridge; 
      width: 968px;
      overflow: visible; 
      padding: 0px; 
      margin-top: 0px; 
      margin-right: auto; 
      margin-bottom: 0px;
      margin-left: auto; 
      }

      $('#d3show').click(function() {
          $('#d1').hide('slow', function() {
          // Animation complete.
      });
      $('#d2').hide('slow', function() {
        // Animation complete.
      });
      $('#d3').show('slow', function() {
       // Animation complete.
     });
     });

    $('#d3show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'inline');
    });

    $('#d2show').click(function() {
      $('#d1').css('display', 'none');
      $('#d2').css('display', 'inline');
      $('#d3').css('display', 'none');
    });

    $('#d1show').click(function() {
      $('#d1').css('display', 'inline');
      $('#d2').css('display', 'none');
      $('#d3').css('display', 'none');
    });