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' );
}
Written by Tatu Kairi
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#