0

以下は、3つの画像を水平方向に並べたコードです。各画像をクリックすると、他の画像を削除する簡単なアクションを追加しましたが、クリックした場合の画像2と画像3は、画像1のように左揃えではなく、現在の領域に残ります。画像2を左揃えにする方法はありますかまたはクリックされた場合は3？どうもありがとう

<div style="width:510px; height:105px; padding:5px;">

    <img alt="Passenger Vehicle" id="V1" src="http://hou-agsprd02/images/basictruck.gif" onclick="Vehicle1()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
    <img alt="Water Vehicle" id="V2" src="http://hou-agsprd02/images/WaterTruck.gif" onclick="Vehicle2()" style="width:150px; height:100px; border:1px solid blue; float:left;" />
    <img alt="Rig Transport Vehicle" id="V3" src="http://hou-agsprd02/images/GasTruck.gif" onclick="Vehicle3()" style="width:150px; height:100px; border:1px solid blue; float:left;" />

</div>

これは、画像1がクリックされた場合に画像2と3を非表示にする別の関数のコードです。省略して申し訳ありません。

 document.getElementById('V2').style.visibility = 'hidden';
 document.getElementById('V3').style.visibility = 'hidden';
4

2 に答える 2

1

可視性をhiddenに設定します。これは基本的にブロックを非表示にしますが、それでもレイアウト内のスペースを占有します。

display属性をに設定して、ブロックがかつてあったスペースを削除しますnone。

javascriptコードに基づいて、コードを次のように変更することでそれを行うことができます。

document.getElementById('V2').style.display = 'none';
document.getElementById('V3').style.display = 'none';

これを行うと、ブロックが削除され、その周りの要素が、かつて非表示のブロックがあった領域に折りたたまれることに気付くでしょう。

于 2013-02-07T17:48:22.040 に答える
0

あなたのJavascriptコードは何ですか？画像を非表示にしているだけの場合は、まだそこにあります。ページから実際に画像を削除する必要があります。そうすると、画像は左に浮いているため、その場所を埋めます。

于 2013-02-07T17:18:02.957 に答える