Cacher is the code snippet organizer for pro developers

.tabs{
 
    .tab{
        display: none;
        background:#fff;
 
        &.active{
            display: block;
        }
    }
}

$('.tabs').each(function(){
    var self = $(this);
 
    if(self.find('.tabs-wrapper .tab.active').length === 0) {
        self.find('.tabs-nav > *:first').addClass('active');
        self.find('.tabs-wrapper .tab:first').addClass('active');
    }
 
    self.find('.tabs-nav a').on('click', function(){
        var tab        = $($(this).attr('href')),
            isActive   = $(this).hasClass('active'),
            linkActive = self.find('.tabs-nav .active'),
            tabActive  = self.find('.tab.active');
 
        if(!isActive){
            linkActive.removeClass('active');
            tabActive.removeClass('active');
            tab.addClass('active');
            $(this).addClass('active');
        }
 
        return false;
    });
});

<div class="tabs">
    <div class="tabs-nav">
        <a href="#tab1">Таб 1</a>
        <a href="#tab2">Таб 2</a>
        <a href="#tab3">Таб 3</a>
    </div>
    <div class="tabs-wrapper">
        <div class="tab" id="tab1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, sed, corrupti iusto cumque praesentium adipisci hic recusandae error a suscipit earum sit quibusdam saepe ipsa sequi corporis dolore ad tempore!</p>
        </div>
        <div class="tab" id="tab2">
            <p>Temporibus, quam, dolorum, iure facere doloribus a voluptate commodi ratione alias necessitatibus voluptas deleniti pariatur nesciunt maiores aliquam vitae et dignissimos fuga cupiditate ad! Culpa, ut blanditiis eaque numquam sunt.</p>
        </div>
        <div class="tab" id="tab3">
            <p>Sint, architecto non maxime quo nesciunt ut amet itaque perspiciatis! Eius, laudantium fugiat quisquam nesciunt eos. Amet, perspiciatis, veniam natus voluptatum aut optio nobis sequi nulla harum incidunt minima voluptate.</p>
        </div>
    </div>
</div>