Question

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

HTML：

  <p onclick="Show_1(0)" >1 </a> </p>
  <p onclick="Show_2(0)">2 </a> </p>
  <p onclick="Show_3(0)">3 </a></p>

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

JQuery :(对其他div重复的功能）

 function Show_3(x){
 $('#1').hide(x);
 $('#2').hide(x);
 $('#3').show(x);   
}

CSS：

#1, #2, #3{
    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;  
}

#container2 { 
    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; 
}

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

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

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

我无法在其他问题中找到这个确切的问题，并且任何类似问题的解决方案都没有奏效。

之前对此问题的任何建议或经验？提前感谢任何帮助建议。

EDIT。

我试图保持简单，我在上面添加了一些代码。除了下方的白色空间外，它一切运作良好。

再次感谢。

Answer 1

这是非常困难的，因为你没有包含任何代码，但从你的问题的描述我收集到你隐藏的元素。使用CSS（有或没有jQuery）可以做两件事来“隐藏”元素：

隐藏这将隐藏元素，但它仍会占用布局中相同的空间，因为它在技术上仍然存在。
显示：无这将从布局中删除元素，这意味着它不会影响您的布局（除非它是在构建时考虑到这个元素）。

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

http://www.w3schools.com/css/css_display_visibility.asp

N.B。我会找到比w3傻瓜更好的链接，但是当我在工作时不能。

修订版1 - 显示（），隐藏（）方法

我根据你的代码的一些细微修改来解决一些简单的事情，这些修改证明了你遇到的问题（因为你的代码对于其他任何可能看到并尝试它的人而言并非完全即插即用）。任何看过小提琴的人都会看到容器底部有隐藏元素的空间，如上面第1点所示。

http://jsfiddle.net/jezzipin/nezPm/

HTML

      <p> <a href="#" id="d1show">1</a> </p>
      <p> <a href="#" id="d2show">2</a> </p>
      <p> <a href="#" id="d3show">3</a></p>

      <div id="container">
        <div id="d1">Hello 1</div>
        <div id="d2">Hi 2</div>
        <div id="d3">Hello 3</div>
      </div>

CSS

      #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; 
      }

的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版本，您可以轻松地比较这两种方法：

http://jsfiddle.net/jezzipin/nY6u3/

上面唯一的变化是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创建的空白区域

1 个答案:

修订版1 - 显示（），隐藏（）方法

修订版2 - CSS方法