Question

所以基本上我们有一个概念图：http://imgur.com/a/Z38Fy

这些窗口中的每一个都是网站上的div元素，点击后应该位于顶部。假设我们点击窗口＃2，这意味着窗口2现在在顶部，窗口1在它后面。这就是Windows操作系统各个窗口的工作原理。

使用jQuery和javascript可以吗？

Answer 1

这是你在找什么？

点击div时设置z-index，并将其他z-index设置为较低

＆＃13;

$("div").click(function() {
  $("div").not(this).css("z-index", "1")
  $(this).css("z-index", "2")
})

＆＃13;

div {
  position: absolute;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color:white;
}

.one {}

.two {
  top: 40px;
  left: 100px;
}

.three {
  top: 70px;
  left: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>

＆＃13;

Answer 2

一个简单的例子

＆＃13;

$(".window").on("click", function() {
  $(".window").css("z-index", 0);
  $(this).css("z-index", 1);
});

＆＃13;

.window {
  width: 250px;
  height: 250px;
}

.window:nth-child(1) {
  background-color: lightblue;
  position: absolute;
  left: 20px;
  top: 20px;
}

.window:nth-child(2) {
  background-color: purple;
  position: absolute;
  left: 100px;
  top: 60px;
}

.window:nth-child(3) {
  background-color: darkgreen;
  position: absolute;
  left: 180px;
  top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="window">W1</div>
  <div class="window">W2</div>
  <div class="window">W3</div>
</div>

＆＃13;

Answer 3

正如CarstenLøvboAndersen回答的那样，是的！这是有可能的，他给我们提供了一个使用jQuery和javascript的示例。

我只想指出，可以仅使用css和html来完成此操作，此问题的标题是“使div集中并更改z-index”。

请参见修改后的CarstenLøvboAndersen示例：

.container {
  position: absolute;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color: white;
  z-index: 0;
}

.container:focus {
  z-index: 1;
}

.one {}

.two {
  top: 40px;
  left: 100px;
}

.three {
  top: 70px;
  left: 40px;
}

<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>

使div成为焦点并改变z-index

3 个答案: