Часто не очень хочется подключать разные библиотеки, чтобы просто сделать табы. Поэтому оставлю тут

Вкладки (табы) — элемент крайне востребованный в современном веб-дизайне. Он позволяет разместить большое количество информации в ограниченном пространстве. Каждый уважающий себя верстальщик должен уметь делать табы, и именно этим я сегодня собираюсь заняться. Призовем на помощь замечательную библиотеку jQuery и сделаем примитивные, но вполне себе работающие табы.

<div class="container">
    <ul class="tab-title">
        <li>Закладка 1</li>
        <li>Закладка 2</li>
        <li>Закладка 3</li>
        <li>Закладка 4</li>
        <li>Закладка 5</li>
    </ul>

    <ul class="tab-content">
        <li>Контент закладки 1</li>
        <li>Контент закладки 2</li>
        <li>Контент закладки 3</li>
        <li>Контент закладки 4</li>
        <li>Контент закладки 5</li>
    </ul>
</div>
разметка

.tab-title li.active{
    color:red;
    box-shadow:0 -5px 0px -2px red;
}

.tab-content li{

display: none;

}

выделяем активный заголовок и прячем все содержимое табов

а вот сам скрипт

$(function(){

$('.tab-title li').not('.active').click(function(){
    var index = $(this).index();
    var content = $('.tab-content li').eq(index);
    $(this).addClass('active').siblings().removeClass('active');
    $('.tab-content li').css('display', 'none').eq(index).css('display', 'block');
})

    $('.tab-title li:first').addClass('active');
    $('.tab-content li:first').css('display', 'block');

})