Lightweight Tabs using jQuery

html

<div class="tabs cf">
    <a class="tab active" data-type="tab1">tab1</a>
    <a class="tab" data-type="tab2">tab2</a>
    <a class="tab" data-type="tab3">tab3</a>
</div>
<div class="tab-panes">
    <div class="tab-pane active" data-type="tab1">
        tab1 info
    </div>
    <div class="tab-pane" data-type="tab2">
        tab2 info
    </div>
    <div class="tab-pane" data-type="tab3">
        tab3 info
    </div>
</div>

js

$(function() {
    $('.tab').on('click', function(e) {
        $(this).parent().find('.tab.active').removeClass('active');
        $(this).parent().parent().find('.tab-pane.active').removeClass('active');
        var dataType = $(this).attr('data-type');
        $(this).parent().find('.tab[data-type="'+dataType+'"]').addClass('active');
        $(this).parent().parent().find('.tab-pane[data-type="'+dataType+'"]').addClass('active');
    });    
});

less css

// LESS CSS
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.cf {
    *zoom: 1;
    &:before,
    &:after {
      display: table;
      content: "";
    }
    &:after {
      clear: both;
    }
}
.tabs {
    margin-bottom: .7em;
    border-bottom: 1px solid #DDD;

    .tab {
        display: block;
        float: left;
        .border-radius(3px 3px 0 0);
        margin: 0 7px -1px 0;
        padding: 1px 2px;
        border: 1px solid #FFF;
        border-bottom: none;
        cursor: pointer;
        line-height: 1.5em;
        font-size: 1.3em;
        padding: 0 .5em;

        &:hover {
            background: #F3F3F3;
        }

        &.active {
            border: 1px solid #DDD;
            border-bottom: 1px solid #FFF;
            color: #333;
            
            &:hover {
                background: none;
            }
        }
    }
}

.tab-panes {
    
    
    .tab-pane {
        display: none;

        &.active {
            display: block;
        }
    }
}