Affecting ":active" button state with JS/JQuery

Hi, i want to change image nested in the button with “:active” state using JS or Jquery (if it possible).
There are 2 buttons for two different in-page tabs and two different images for every button. What i need, to change the “:active” button img while it’s active, and change it back, when the other button is active.
<button class="tablinks tab1" onclick="openTab(event, 'tab1')"> <img class="btn-img img1" id="img1" src="/img1.png">Tab1</button> <button class="tablinks tab2" onclick="openTab(event, 'tab1')"><img class="btn-img2" id="img2" src="/img2.png"> Tab2</button>

Is something like this really possible?

Well I’ve just solved this. Here is the solution which i found. May be useful.

function before(){ document.getElementById('img1') .src="img3"; document.getElementById('img2') .src="img2"; } function afterr(){ document.getElementById('img2') .src="img4"; document.getElementById('img1') .src="img1"; }

1 Like