Pure JavaScript tabbing functionality with linkable tabs

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.