Ultra simple jQuery tabs
Thought I'd share with you my way of creating simple tabs with jQuery.
Just 4 lines of code.
/* jQuery code */
/* global $ */
$(function () {
'use strict';
$('.tabAnchors').find('a').on('click', function (e) {
$('.tabContent').find('.' + e.currentTarget.id).show().siblings().hide();
$(e.currentTarget).addClass('active').siblings().removeClass('active');
});
});
/* sample markup
<div class="tabAnchors">
<a href="javascript:;" id="tab1" class="active">Tab 1</a>
<a href="javascript:;" id="tab2">Tab 2</a>
<a href="javascript:;" id="tab3">Tab 3</a>
</div>
<div class="tabContent">
<div class="tab1"></div>
<div class="tab2" style="display: none;"></div>
<div class="tab3" style="display: none;"></div>
</div> */
Does anyone have a shorter solution?
Written by Adi
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Tabs
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#