Почему вкладки не становятся активными, когда я открываю их, не нажимая на них непосредственно? ⇐ Html

[Anonymous]

У меня есть вкладки на странице, которые работают хорошо и выглядят «активными», когда вы нажимаете на них, и это здорово, но у меня также есть изображения в блоках div, которые я использую для доступа к вкладкам, и при их использовании они не приобретают активный вид, а я этого хочу.
Вот CSS для вкладок:




.tab button:hover {
background-color: #ffb100;
}

.tab button.active {
background-color: #ffb100;
}




вкладки и ссылки в HTML:



Two
Three

(I'm one)
arrowright


(I'm two)
arrowleft
arrowright


(I'm three)
arrowleft




и функция JavaScript:


function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

document.body.addEventListener('DOMContentLoaded', openCity(event, 'one'));