html - How to tell Javascript what tab is active

Question

Javascript

function openPage(pageName, elmnt) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    

}

document
  list  = document.querySelectorAll(".myTextInputID")
  list[1].addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
            event.preventDefault();
            var input = document.getElementsByClassName("myTextInputID")[0]
                .value;
            if (input.includes("https://www.amazon.co.uk/")) {
                document.getElementsByClassName("containFORM")[0]
                    .insertAdjacentElement("beforeend", itemcont);
                document.getElementById("prodcont")
                    .insertAdjacentElement("afterbegin", imgcont);
                document.getElementsByClassName("containFORM")[0]

                    .style.backgroundColor = "white"
            } else {
                var URLerror = document.createElement("p"); 
                URLerror.classList.add("error");
                var urlerror = document.createTextNode("This is not an amazon url, please input an amazon url and press enter again.");
                URLerror.appendChild(urlerror);
                var cont = document.getElementsByClassName("myForm")[0];
                cont.insertAdjacentElement("afterend", URLerror);
                setTimeout(function() {
                    URLerror.remove();
                }, 2000);
            }
        }
    });

function newTab() {
    var allTabs = document.getElementById("navigation2");
    var tabList = document.createElement("li");
    var error = document.createElement("p");
    var eNode = document.createTextNode("You cant track this many products");
    var button1 = document.getElementById("button1");
    var tabButton = document.createElement("button");
    tabButton.setAttribute("onclick", "openPage('1', this, 'red')")
    error.classList.add("error");
    tabList.classList.add("tabli");
    tabButton.classList.add("tabs");
    if (button1.offsetWidth < 190) {
        error.appendChild(eNode);
        document.getElementById("tabcon")
            .insertAdjacentElement("afterend", error);
        setTimeout(function() {
            error.remove();
        }, 2000);
    } else {
        tabList.appendChild(tabButton);
        allTabs.insertAdjacentElement("beforebegin", tabList);
        var newt = ("window.location.href=")+("'")+("#")+("newtab")+("'");
        var newtab = document.createElement("div")
        newtab.id="#newtab";
        newtab.className="containFORM";
 // true means clone all childNodes and all event handlers
        document.getElementById("0").insertAdjacentElement("afterend", clone)
        clone.id = "1";
    }
    
}

When you press the new tab button it makes a new tab and creates a clone of a stored element, however with the class selector I can only put a number (0,1) but I need it so its some sort of variable(x), x being the number of the current tab. So when you click on one tab set x to that and then all logic will be performed on each tab, I can't think of a way to do this without copying what I've done multiple times and just changing the number myself, which doesn't feel very efficient.

question from:https://stackoverflow.com/questions/65886250/how-to-tell-javascript-what-tab-is-active

Answer 1

I have found this piece of code in JQuery that might help you.

var activeTab = $(".tab-content").find(".active");
console.log(activeTab.context.URL);

If you try it while inspect this very page, you can check that the result is the URL of this page:

https://stackoverflow.com/questions/65886250/how-to-tell-javascript-what-tab-is-active