Tenho quatro funções que fazem a mesma coisa, uma troca de imagem no evento click. Minha dúvida é, como faço pro item anterior voltar à imagem que estava antes quando eu clicar no próximo?
function mudaImagem() {
var imgA = "https://danielelima.com.br/files/giiiiiii.gif";
var imgA2 = "https://danielelima.com.br/files/elipse-1.png";
var img = document.getElementById('imagem01');
img.src = (img.src == imgA ? imgA2 : imgA);
}
document.getElementById('imagem01').addEventListener('click', mudaImagem, true);
function mudaImagem2() {
var imgB = "https://danielelima.com.br/files/giiiiiii2.gif";
var imgB2 = "https://danielelima.com.br/files/elipse-2.png";
var img = document.getElementById('imagem02');
img.src = (img.src == imgB2 ? imgB : imgB2);
}
document.getElementById('imagem02').addEventListener('click', mudaImagem2, true);
function mudaImagem3() {
var imgC = "https://danielelima.com.br/files/giiiiiii3.gif";
var imgC2 = "https://danielelima.com.br/files/elipse-3.png";
var img = document.getElementById('imagem03');
img.src = (img.src == imgC2 ? imgC : imgC2);
}
document.getElementById('imagem03').addEventListener('click', mudaImagem3, true);
function mudaImagem4() {
var imgD = "https://danielelima.com.br/files/giiiiiii4.gif";
var imgD2 = "https://danielelima.com.br/files/elipse-4.png";
var img = document.getElementById('imagem04');
img.src = (img.src == imgD2 ? imgD : imgD2);
}
document.getElementById('imagem04').addEventListener('click', mudaImagem4, true);
Meu html
<ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-item">
<a href="#um" class="nav-link active" data-toggle="tab">
<img id="imagem01" class="img-fluid" src="https://danielelima.com.br/files/elipse-1.png" width="104px" alt="01" title="01">
</a>
</li>
<li class="nav-item">
<a href="#dois" class="nav-link" data-toggle="tab">
<img id="imagem02" class="img-fluid mobile" src="https://danielelima.com.br/files/giiiiiii2.gif" alt="02" width="104px" title="02">
</a>
</li>
<li class="nav-item">
<a href="#tres" class="nav-link" data-toggle="tab">
<img id="imagem03" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii3.gif" alt="03" width="104px">
</a>
</li>
<li class="nav-item">
<a href="#quatro" class="nav-link" data-toggle="tab">
<img id="imagem04" class="img-fluid" src="https://danielelima.com.br/files/giiiiiii4.gif" alt="04" width="104px">
</a>
</li>
</ul>