Question

我希望使用jquery切换3个div的z-index，但我不知道如何去做。我正在寻找的期望效果就是单击与相应div相对应的按钮，并使该div的z-index成为更大的数字，以便显示该div中的内容。截至目前，我已经将每个div层叠在一起。

＆＃13;

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

＆＃13;

<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>

＆＃13;

然后，我正在寻找如何只需点击一个按钮让相应的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>

使用z-index切换div

1 个答案: