Question

我有一个关于通过另一个div的大小选择div的问题。

我有两层div。顶层包含几个小方块（DIV TYPE 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]

Answer 1

使用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;


}

JAVASCRIPT

function type2() {

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

}

function type1() {

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

}

如果你想要消除div更改“style.zIndex = -3;”通过“style.display =”none“;”在javascript中

按照底层div的大小选择div

1 个答案: