<style>
div[class*="tabtn_"] {
cursor: pointer;
transition: all 0.2s linear;
}
.tabEff {
transform: scale(1.2)
}
div[class*="tabtn_"]:not(.tabEff):hover {
transform: scale(0.8)
}
.tabcont-hide {
opacity: 0 !important;
pointer-events: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let tabContents = document.querySelectorAll('div[class*="tabcont_"]');
let tabButtons = document.querySelectorAll('div[class*="tabtn_"]');
function selectContent(index) {
for (let button of tabButtons) {
for (let className of button.classList) {
if (!className.includes("tabtn")) {
continue
}
if (className === "tabtn_" + index) {
button.classList.add("tabEff")
}
else {
button.classList.remove("tabEff")
}
}
}
for (let content of tabContents) {
for (let className of content.classList) {
if (!className.includes("tabcont")) {
continue
}
if (className === "tabcont_" + index) {
content.classList.remove("tabcont-hide")
}
else {
content.classList.add("tabcont-hide")
}
}
}
}
for (let eventBtn of tabButtons) {
eventBtn.addEventListener("click", function() {
for (let className of eventBtn.classList) {
if (!className.includes("tabtn_")) {
continue
}
index = className.replace(/[^0-9]/g, "");
selectContent(index)
}
})
}
selectContent(1)
});
</script>