How to temporarily increase the z-index of a div onclick of a button?-CodePudding

I'm trying to mimic the behavior of a taskbar, when clicking on an icon (button), it should raise the z-index of a div, so as to give focus to that div in case there's another div covering it. It should not be spammable, one raise to give focus should be enough.

However it should also reduce its z-index added if another button is clicked so as not to raise it too much every time it's clicked.

I would prefer if the way to target the buttons are not using the id as it will not be reusable, since the tool have many ways to trigger one div.

Please see the code so far:

.a-bg {
  background-color: gray;
  width: 300px;
  height: 300px;
}

.b-bg {
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 2;
  position: absolute;
  top: 50px;
  left: 50px;
}

.c-bg {
  background-color: yellow;
  width: 100px;
  height: 100px;
  z-index: 3;
  position: absolute;
  top: 100px;
  left: 100px;
}

<div  id="a-bg">A</div>
<div  id="b-bg">B</div>
<div  id="c-bg">C</div>

<div style="margin-top: 10px; margin-left: 100px;">
  <button >A</button>
  <button >B</button>
  <button >C</button>
</div>

<p>Another set of anchor links that does the same function as the buttons above.</p>

<div style="margin-top: 10px; margin-left: 100px;">
  <a  href="#">A</a>
  <a  href="#">B</a>
  <a  href="#">C</a>
</div>

There's no JS yet, but in this sample, what I hope to achieve is, if a user clicks A, it will raise its z-index and overlap B and C... same goes for the other buttons.

A user should be able to click each button repeatedly to switch between the different divs.

I'm a newbie in JS and it's why I cannot complete it on my own.

let aBtn = document.getElementsByClassName("a-btn");
let bBtn = document.getElementsByClassName("b-btn");
let cBtn = document.getElementsByClassName("c-btn");

if (aBtn.isClicked) {
  document.getElementById(a-bg).style.zIndex = 1;
}

if (bBtn.isClicked) {
  document.getElementById(b-bg).style.zIndex = 1;
}

if (bBtn.isClicked) {
  document.getElementById(c-bg).style.zIndex = 1;
}

I know this script is full of errors, but I'm thinking of it being done somehow like this.

That's all for now... thank you in advance to any help or pointers on how I can achieve this.

CodePudding user response：

Use an event listener and add a data attribute to it, ie the id of the div. Then use this to toggle the z-index.

Something like this should work, it toggles the clicked box z-index to 1 and should change the others to z-index -1. Its something for you to play around with but gives you the idea how the event handler works.

CSS

.a-bg {
  background-color: gray;
  width: 300px;
  height: 300px;
  z-index:-1;
}

.b-bg {
  background-color: red;
  width: 200px;
  height: 200px;
  z-index:0;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index:-1;
}

.c-bg {
  background-color: yellow;
  width: 100px;
  height: 100px;

  position: absolute;
  top: 100px;
  left: 100px;
  z-index:-1;
}

.show{
z-index:1;
}

HTML

<div  id="a-bg">A</div>
<div  id="b-bg">B</div>
<div  id="c-bg">C</div>

<div id="button" style="margin-top: 10px; margin-left: 100px;">
  <button  data-box="a-bg">A</button>
  <button  data-box="b-bg">B</button>
  <button  data-box="c-bg">C</button>
</div>

$('#button button').click(function() { 
var box = $(this).attr('data-box');
$('#'   box).addClass('show').siblings().removeClass('show');
 alert(box); // Alerts the box id selected
})