Last Updated: February 25, 2016
·
747
· tattoo

Create tab view without JavaScript

With clever use of HTML and CSS, you can create tab view without any JavaScript:

http://blog.ponyfoo.com/2013/10/18/your-tab-views-suck

The problem with this is, you cannot style the label for active tab with pure CSS. That is remedied with few lines of JS:

window.onload = function(){
    var labels = Array.prototype.slice.call(document.querySelectorAll( '.tab-label' ));

    labels.forEach(function( label ){
        label.onclick = function(){
            labels.forEach(function( l ){
                l.classList.remove( 'active' );
            });
            label.classList.add( 'active' );
        }
    });  

    labels[0].classList.add( 'active' );        
}