Как сделать обработку нажатия на какой-либо тег с конкретным классом?

[...document.querySelectorAll("a")].forEach((item, index) => { 
  item.addEventListener("click", (e) => { 
    let foo = document.querySelectorAll("p"); 
    for (var i = 0; i < foo.length; i++) { 
      if (foo[i].classList.contains("active")) { 
        foo[i].classList.remove("active"); 
      } else { 
        foo[index].classList.add("active"); 
      } 
    } 
  }); 
});

.active { 
  background: pink; 
}

<a href="#">Click me 1</a> 
<a href="#">Click me 2</a> 
 
<p>Some text 1</p> 
<p>Some text 2</p>

function active(element) { 
  //Очищаем все уже нажатые элементы 
  for (var i = 1; i < 3; i++) { 
    var clear = document.getElementById("tab_" + i); 
    clear.className = "cont" + i; 
  } 
  //Присваиваем новый класс нажатому элементу 
  var block = document.getElementById("tab_" + element); 
  if (block.className == "cont" + element) { 
    block.className = "cont" + element + " is_active"; 
  } 
} 
 
[].slice.call(document.querySelectorAll('.clickable')) 
  .forEach((el, i) => el.onclick = active.bind(null, i+1));

.is_active{ 
  background-color: red; 
}

<div><a href="#" class='clickable'>Смени меня</a></div> 
<div><a href="#" class='clickable'>Смени меня</a></div> 
<div id="tab_1" class="cont1 is_active"> 
  <p>Первый див</p> 
</div> 
<div id="tab_2" class="cont2"> 
  <p>Второй див</p> 
</div>