Tab selection without jQuery-CodePudding

I have a function in jQuery to switch tabs and as it the only one using jQuery, I want to convert it to JS only. After hours of trying (still learning) and feeling miserable to fail at this trivial thing, I humbly ask for help.

$(document).ready(function() {
    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click', function (event) {
        if (event.type === "click") {
            var tabClicked = $(this).data("tab-index");
            $(".tab-switcher").removeClass("active")
            $(this).addClass("active")
            if(tabClicked != previousActiveTabIndex) {
                $(".tab-container").hide();
                $("#allTabsContainer .tab-container").each(function () {
                    if($(this).data("tab-index") == tabClicked) {
                        $(this).show();
                        previousActiveTabIndex = $(this).data("tab-index");
                        return;
                    }
                });
            }
        }
    });
});

#header ul {
  margin: 0.15em;
  padding-bottom: 0.3em;
  padding-left: 0.4em;
}

.tab-switcher {
  display: inline-block;
  cursor: pointer;
  margin-right: 1.7em;
}

.tab-switcher:hover {
  color: #0f0;
  border-bottom: 0.15em solid var(--mainCol);
}

.tab-switcher.active {
  color: var(--mainCol);
  border-bottom: 0.15em solid var(--mainCol);
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <ul>
    <li  data-tab-index="0" tabindex="0">Locations</li>
    <li  data-tab-index="1" tabindex="0">Inventory</li>
    <li  data-tab-index="2" tabindex="0">Profile</li>
  </ul>
</div>


<div id="allTabsContainer" data-tab-show="0">
  <div  id="locations" data-tab-index="0">
    content 1
  </div>
  <div  data-tab-index="1" style="display:none">
    content 2
  </div>
  <div  data-tab-index="2" style="display:none">
    content 3
  </div>
</div>

I was about here when I gave up, my forEach/event listener won't even work and I don't know even why, any help/explanation appreciated.

function Tabmenu() {
  var previousActiveTabIndex = 0;
  let Tab = document.querySelectorAll('tab-switcher');
  let Content = document.querySelectorAll("tab-container");

  Tab.forEach(t => t.addEventListener("click", function() {
    alert("coucou");
  }))
  }

window.onload = Tabmenu;

CodePudding user response：

I believe the element listener is not being called, try adding a "." in front of the selector names as follows. I reckon it does not know what the element is.

document.querySelectorAll('.tab-switcher');

and

document.querySelectorAll(".tab-container");

Hope this helps!

CodePudding user response：

After more time that I should have work on this, and some help, I finally reach a solution and rearranged the code to suit whichever combination of tab:content I run into my code

here it is, for reference

function Tabmenu(tabClass,contentClass) {
var previousActiveTabIndex = 0;
let tabs = document.querySelectorAll(tabClass);
let tabscontent = document.querySelectorAll(contentClass);

for(const t of tabs) {
    t.addEventListener("click", function() {
        var tabClicked = t.dataset.tabIndex;
        for(const i of tabs) {
            i.classList.remove("active");
        }
        t.classList.add("active");
        if (tabClicked != previousActiveTabIndex) {
            for(const c of tabscontent) {
                c.style.display = "none";
                if (c.dataset.tabIndex == tabClicked) {
                    c.style.display = "";
                    previousActiveTabIndex = c.dataset.tabIndex;
                }
            } 
        }
    })
}

}

there are probably many way to optimise this, but as an answer I would like to have, it work as intended.