You can find JavaScript tabs anywhere, but only 5-10% of those are physically linkable. The script below shows you how to create such tabs without any JS library.
See a Codepen demo for the complete code (HTML + CSS).
// JavaScript to enable link to tab
var hash = document.location.hash;
if (hash) {
document.querySelectorAll('.whiskey-tabs li a[href="' + hash + '"]')[0].click();
}
var tabLinks = document.querySelectorAll('.whiskey-tabs li a');
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].onclick = function() {
var target = this.getAttribute('href').replace('#', '');
var sections = document.querySelectorAll('.whiskey-tab-content');
for (var j=0; j < sections.length; j++) {
sections[j].style.display = 'none';
}
document.getElementById(target).style.display = 'block';
for (var k=0; k < tabLinks.length; k++) {
tabLinks[k].removeAttribute('class');
}
this.setAttribute('class', 'is-active');
return false;
}
};
See the Pen Pure JavaScript tabbing functionality with linkable tabs by Ciprian (@ciprian) on CodePen.
Find more JavaScript tutorials, code snippets and samples here.

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!