Есть незамысловатая верстка. Необходимо написать обработчик кликов, при котором цель получает класс active, а другие этот клас теряют.
<div class="loc_tabs-item">
<h4 class="state_name"><?php echo $state -> name ?></h4>
<ul class="state_loc_list">
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
</ul>
</div>
<div class="loc_tabs-item">
<h4 class="state_name"><?php echo $state -> name ?></h4>
<ul class="state_loc_list">
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
<li class="state_loc-item"><a href="<?php echo get_permalink($loc) ?>"><?php echo $loc -> post_title ?></a></li>
</ul>
</div>
Пробовал так, но не тут то было)
let statName = document.querySelectorAll(".state_name");
let locList = document.querySelectorAll(".state_loc_list");
document.addEventListener('click', function(event){
statName.classList.remove('active');
locList .classList.remove('active');
statName.classList.add('active');
locList.classList.add('active');
})
Короче, задача простая, а решение на нативном написать не могу. Помогите, пожалуйста!
