🥇 Abas jQuery ultra simples

Pensei em compartilhar com vocês minha maneira de criar guias simples com jQuery.

Apenas 4 linhas de código.

/* 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> */

Alguém tem uma solução mais curta?

Related Posts