Универсальный jQuery-скрипт для блоков с вкладками

tabs.html

<style>
.tabs__content {
    display: none;
}
.tabs__content.active {
    display: block;
}
</style>


<div class="tabs">
    <ul class="tabs__caption">
        <li class="active">1-я вкладка</li>
        <li>2-я вкладка</li>
    </ul>
    <div class="tabs__content active">
        Содержимое первого блока
  </div>
    <div class="tabs__content">
        Содержимое второго блока
  </div>
</div><!-- .tabs -->


<script>
// v1
(function($) {
    $(function() {
        $('ul.tabs').each(function() {
            $(this).find('li').each(function(i) {
                $(this).click(function(){
                    $(this).addClass('active').siblings().removeClass('active')
                        .parents('div.tabs').find('div.tabs__content').eq(i).fadeIn(150).siblings('div.tabs__content').hide();
                });
            });
        });
    })
})(jQuery)

// v2 (need jQuery > 1.7)
(function($) {
    $(function() {
        $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
            $(this).addClass('active').siblings().removeClass('active')
                .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
        })
    })
})(jQuery)
</script>