javascript - 使用 z-index 切换 div

Question

我想使用 jquery 来切换 3 个 div 的 z-index，但我不知道该怎么做。我正在寻找的预期效果只是单击对应于相应 div 的按钮，并使该 div 的 z-index 变为更大的数字，以便显示该 div 中的内容。截至目前，我将每个 div 层叠在一起。

.toggle-content {
  position: absolute;
  float: left;
  width: 50px;
  height: 50px;
}

<div id="content">
  <div id="toggle">
    <a href="#">
      <div class="button" data-content="#1">1</div>
    </a>
    <a href="#">
      <div class="button" data-content="#2">2</div>
    </a>
    <a href="#">
      <div class="button" data-content="#3">3</div>
    </a>
  </div>
  <div id="togglecontent">
    <div id="1" class="toggle-content" style="z-index:9;">1</div>
    <div id="2" class="toggle-content" style="z-index:8;">2</div>
    <div id="3" class="toggle-content" style="z-index:7;">3</div>
  </div>
</div>

然后我在寻找如何单击按钮使相应的 div 将其 z-index 更改为最高值。

如有任何帮助，我们将不胜感激!

Answer 1

你可以这样做:

$('#toggle').on('click', 'a', function(e) {
   e.preventDefault();
   $( $(this).children().data('content') ).css('zIndex', 5).siblings().css('zIndex', 4);
});

.toggle-content {
  position: absolute;
  float: left;
  width: 50px;
  height: 50px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="toggle">
    <a href="#">
      <div class="button" data-content="#1">1</div>
    </a>
    <a href="#">
      <div class="button" data-content="#2">2</div>
    </a>
    <a href="#">
      <div class="button" data-content="#3">3</div>
    </a>
  </div>
  <div id="togglecontent">
    <div id="1" class="toggle-content" style="z-index:9;">1</div>
    <div id="2" class="toggle-content" style="z-index:8;">2</div>
    <div id="3" class="toggle-content" style="z-index:7;">3</div>
  </div>
</div>