JS

JS tabs

// tabs
document.querySelectorAll("ul.tabs").forEach(function (tabs) {
	let active, content, links = tabs.querySelectorAll("a");

	for (const link of links) {
		if (link.href === location.hash) {
			active = link;
			break;
		}
	}
	active = active || links[0];
	active.classList.add("active");
	active.parentElement.classList.add("has-active");

	content = document.querySelector(active.hash);

	links.forEach((link) => {
		if (link !== active) {
			document.querySelector(link.hash).style.display = "none";
		}
	});

	content.classList.add("active");

	tabs.addEventListener("click", function (event) {
		if (event.target.tagName === "A") {
			active.classList.remove("active");
			active.parentElement.classList.remove("has-active");
			content.style.display = "none";
			content.classList.remove("active");

			active = event.target;
			content = document.querySelector(active.hash);

			active.classList.add("active");
			active.parentElement.classList.add("has-active");
			content.style.display = "";
			content.classList.add("active");

			event.preventDefault();
		}
	});
});

// add # to url
const url = document.URL;
const hash = url.substring(url.indexOf("#"));

document.querySelectorAll("ul.tabs a").forEach(function (link) {
	if (hash === link.getAttribute("href")) {
		link.click();
	}

	link.addEventListener("click", function (event) {
		event.preventDefault();
		const scrollTop = window.scrollY;
		location.hash = link.getAttribute("href");
		window.scrollTo(0, scrollTop);
	});
});

This function sets up a tabbed interface by selecting all “ul.tabs” elements, adding “active” and “has-active” classes to the first or a specific tab based on the URL hash, hiding all non-active tabs, and switching between tabs on click while also updating the URL hash.