Add active after click link-CodePudding

I have this code below, and I wanted to know how I can make it active after the click?

.sprite {
  background: url(https://liveplanet.app.br/assets/images/sprite-icons.png) no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

a.audio {
  background-position: 0px -720px;
}

a.audio:hover {
  background-position: -40px -720px;
}

a.audio:active {
  background-position: -80px -720px;
}

<li >
  <a (click)="toggleAudio()" href="javascript:void(0);"  data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a>
</li>

CodePudding user response：

As per the spec, the :active CSS selector will only match

while an element is being activated by the user

What you're looking for is the :focus pseudo selector, which also matches after your click (without any additional JavaScript).

a.audio:focus { ... }

If you want to control the active element with JavaScript, you can use the focus():

<li >
  <a (click)="toggleAudio(); this.focus();" href="javascript:void(0);"  data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a>
</li>

CodePudding user response：

So If I understand you correctly, then you want this button (a button for controlling the audio) to have a active class when clicked on correct? If so here is my proposal. Hopefully this can provide what you are looking to achieve. Let me know if this works for you or not.

You can see that when clicking on the button, if you look at it through inspect element. It will append a 'active' class on click, & remove it when clicked again.

Codepen here: https://codepen.io/no-named-user/pen/abELyar

let a = document.querySelector('#active');

a.onclick = function() {
  a.classList.toggle("active");
}

.sprite {
  background: url(https://liveplanet.app.br/assets/images/sprite-icons.png) no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

a.audio {
  background-position: 0px -720px;
}

a.audio:hover {
  background-position: -40px -720px;
}

a.audio:active {
  background-position: -80px -720px;
}

<li >
  <a (click)="toggleAudio()" href="javascript:void(0);"  data-bs-toggle="tooltip" data-bs-placement="top" title="Audio" id = "active"></a>
</li>