Pure JavaScript tabbing functionality with linkable tabs

👋 Ciprian on Tuesday, September 19, 2017 in Blog
Last modified on Monday, September 18, 2017

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

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.

👋 Added by Ciprian on Tuesday, September 19, 2017 in Blog. Last modified on Monday, September 18, 2017.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy