Табы (вкладки)

<div class="tabs" id="tabs">
	<!-- Кнопки -->
	<ul class="tabs-nav">
		<li><a href="#tab-1">Вкладка №1</a></li>
		<li><a href="#tab-2">Вкладка №2</a></li>
		<li><a href="#tab-3">Вкладка №3</a></li>
	</ul>	
	
	<!-- Контент -->
	<div class="tabs-items">
		<div class="tabs-item" id="tab-1">
			<strong>Текст вкладки №1</strong>
		</div>
		<div class="tabs-item" id="tab-2">
			<strong>Текст вкладки №2</strong>
		</div>
		<div class="tabs-item" id="tab-3">
			<strong>Текст вкладки №3</strong>
		</div>		
	</div>
</div>

js

//табы
(function(){
    $(function() {
        var tab = $('.tabs-items > div'); 
        tab.hide().filter(':first').show(); 

        // Клики по вкладкам.
        $('#tabs .tabs-nav a').click(function(){
            tab.hide(); 
            tab.filter(this.hash).fadeIn(500); 
            $('#tabs .tabs-nav a').removeClass('active');
            $(this).addClass('active');
            return false;
        }).filter(':first').click();

        // Клики по якорным ссылкам.
        $('.tabs-target').click(function(){
            $('.tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
        });
    });
})();
//табы

Дополнительно скрипт поддерживает открытие табов кликом по якорным ссылкам. У ссылки должен быть class=»tabs-target», href=»#tabs» для того чтобы переместится к блоку с табами и атрибут data-id содержащий id вкладки.

<a class="tabs-target" href="#tabs" data-id="#tab-1">Открыть вкладку 1</a>
<a class="tabs-target" href="#tabs" data-id="#tab-2">Открыть вкладку 2</a>
<a class="tabs-target" href="#tabs" data-id="#tab-3">Открыть вкладку 3</a>

LESS

.tabs{
    margin-top: 100px;
    
    .tabs-nav{
        padding: 0;
        margin: 0;
        margin-bottom: 50px;
        
        li{
            list-style: none;
            display: inline-block;
            vertical-align: text-top;
            margin-right: 5px;
            
            a{
                display: block;
                text-decoration: none;
                color: @text;
                font-weight: bold;
                
                border: 2px solid #e1f0f7;
                padding: 13px 38px;
                padding-top: 11px;
                padding-bottom: 14px;
                border-radius: 5px;
                font-weight: bold;
                
                &:hover{
                    background: #e1f0f7;
                }
            }
            .active{
                background: #e1f0f7;
            }
        }
    }
}