0

別の div のサイズで div を選択することについて質問があります。

2 つのレイヤーの div があります。最上層にはいくつかの小さな正方形 (DIV TYPE 1) が含まれ、最下層には特定のサイズの 1 つの div (DIV TYPE 2) のみが含まれます。

ここで、DIV TYPE 2 を「アクティブ化」すると (たとえば、アクティブ化はリンクにすることができます)、DIV TYPE 2 の上にある DIV TYPE 1 の正方形のみを選択して、それらを非表示にして DIV TYPE 2 を表示したいと考えています。 .

[IMG]http://i41.tinypic.com/2ik3zi0.jpg[/IMG]

4

1 に答える 1

0

http://codepen.io/ColoO/pen/tfGap

javascrit を使用して、div タイプ 1 の z-index プロパティを変更します。div の絶対位置を設定する必要があります。

HTML

<div id="main">
  <div id="type1">type1</div>
  <div id="type2">type2</div>
</div>

<a href="#" onClick="type1()">appear type 1</a> |
<a href="#" onClick="type2()">appear type 2</a>

CSS

#main {
  background:grey;
  width:400px;
  height:300px;
  position:relative;
  z-index:-12;
}

#type1{
  position:absolute;
  background: pink;
  top:10px;
  left:10px;
  height:100px;
  width:100px;
  z-index:2;

}

#type2{
  position:absolute;
  background: red;
  top:20px;
  left:20px;
  height:100px;
  width:100px;


}

ジャバスクリプト

function type2() {

  document.getElementById('type1').style.zIndex = -3;

}

function type1() {

  document.getElementById('type1').style.zIndex = 2;

}

divを消したい場合は「style.zIndex = -3;」に変更 by "style.display = "none";" ジャバスクリプトで

于 2013-11-15T13:29:01.523 に答える