JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<ul class="tabs">
    <li><a href="#" id="tab_1" class="active">T1</a>

    </li>
    <li><a href="#" id="tab_2">T2</a>

    </li>
</ul>

JavaScript

/* Somewhere in here get those elements (assuming there are more ul and li objects elsewhere in the html) and add functions on them that pass in some unique parameters depending on which item it is being triggered from.*/
var toArray = Function.call.bind(Array.prototype.slice);

var tabAnchors = toArray(document.querySelectorAll('.tabs>li>a'));

tabAnchors.forEach(function (elem) {
    elem.addEventListener('click', handleClick);
});

function handleClick (event) {
    console.log(event.target.textContent);
}