0

I have three divs contained within a fourth 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: (function repeated for other divs)

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

I use jquery to hide two of the three divs and show one depending on which button is clicked. The three divs are all relatively positioned and I have shifted the divs 1, 2 and 3 so they are all shown in the same location, ie, click a button and div 2 replaces div 1.

The issue I am having is that there is an amount of white space showing below the end of the div that appears to be equal to the height of the div. For example, if I click the button to show div id=1, then the amount of white space below is equal to the height of div id=1.

I think this is occurring because of shifting the div up with a relative position, but I do not know how to correct it with CSS or if I will need to use jquery.

I have not been able to find this exact issue in other questions and any solutions to similar problems haven't worked.

Any suggestions or experience with this problem before? Thanks in advance for any help suggestions.

EDIT.

I was trying to keep it simple, I have added some code above. It is all working well, except for the white space underneath.

Thanks again.

4

1 回答 1

3

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

  1. 隐藏这将隐藏元素，但它仍会在布局中占用相同数量的空间，因为它在技术上仍然存在。

  2. 显示：无 这将从布局中完全删除元素，这意味着它不会影响您的布局（除非它是在考虑此元素的情况下构建的）。

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

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

注意，我会找到比 w3 傻瓜更好的链接，但目前我在工作时找不到。

修订版 1 - Show()、Hide() 方法

根据您的代码的一些轻微修改，我已经将一些简单的东西组合在一起，这些修改展示了您遇到的问题（因为您的代码对于可能看到并尝试它的其他人来说并不完全是即插即用的）。任何看小提琴的人都会看到容器底部为隐藏元素保留了空间，如上面第 1 点所建议的那样。

http://jsfiddle.net/jezzpin/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/jezzpin/nY6u3/

上面唯一的变化是javascript区域。你会注意到额外的空间不再像使用 show(), hide() 方法那样保留在 div 中。

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');
    });
于 2013-05-07T13:45:49.830 回答