0

4 番目の div 内に 3 つの 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 を使用して、3 つの div のうち 2 つを非表示にし、クリックされたボタンに応じて 1 つを表示します。3 つの div はすべて相対的に配置されており、div 1、2、および 3 を移動して、すべて同じ場所に表示されるようにしました。つまり、ボタンをクリックすると、div 2 が div 1 に置き換わります。

私が抱えている問題は、div の高さと同じように見える div の終わりの下に表示される空白の量があることです。たとえば、ボタンをクリックして div id=1 を表示すると、下の余白の量は div id=1 の高さに等しくなります。

これは、相対位置でdivを上にシフトしたために発生していると思いますが、CSSで修正する方法や、jqueryを使用する必要があるかどうかはわかりません。

他の質問でこの正確な問題を見つけることができず、同様の問題に対する解決策がうまくいきませんでした。

以前にこの問題に関する提案や経験はありますか? ヘルプの提案をお寄せいただきありがとうございます。

編集。

私はそれを単純にしようとしていたので、上記のコードをいくつか追加しました。下の空白を除いて、すべて正常に機能しています。

再度、感謝します。

4

1 に答える 1

3

コードが含まれていないため非常に困難ですが、問題の説明から、要素を隠していることがわかります。CSS を使用して要素を「非表示」にするには、次の 2 つの方法があります (jQuery の有無にかかわらず)。

  1. 非表示 これは要素を非表示にしますが、技術的にはまだ存在するため、レイアウト内で同じ量のスペースを占有します。

  2. 表示: なし これにより、要素がレイアウトから完全に削除されます。つまり、レイアウトには影響しません (この要素を念頭に置いて構築されていない限り)。

標準の hide() および show() 関数を使用するのではなく、jQuery を使用して動的に div の css を変更して、display: none メソッドを使用することをお勧めします。

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

NB w3 愚か者よりも優れたリンクを見つけることができますが、仕事中のため、現時点ではできません。

リビジョン 1 - Show()、Hide() メソッド

発生している問題を示すコードのわずかな改訂に基づいて、簡単なものを一緒にノックしました（コードを見て試してみる可能性のある他の人にとってコードが正確にプラグアンドプレイされていなかったため）。フィドルを見ると、上記のポイント 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 メソッド

2 つの方法を簡単に比較できるように、ここに css バージョンを追加しました。

http://jsfiddle.net/jezzipin/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 に答える