Сделаем вкладки (tabs) используя jQuery и технологию ajax для подгрузки содержимого из файлов (или базы данных).

HTML

В ссылках указываем пути к фалам откуда будем загружать контент:

    <div id="page">
    
        <h1>jQuery AJAX вкладки</h1>
    
        <ul class="mytabs" id="tabs">
            <li class="current"><a href="./tabs/tab-1.html">Вкладка 1</a></li>
            <li><a href="./tabs/tab-2.html">Вкладка 2</a></li>
            <li><a href="./tabs/tab-3.html">Вкладка 3</a></li>
        </ul>
        
        <div class="mytabs-container" id="tabs-container">
            Загрузка. Пожалуйста подождите...
        </div>
        
    </div>

CSS

UL.mytabs {
    position: relative;
    z-index: 2;
}
UL.mytabs, UL.mytabs LI {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
    float: left;
    padding: 7px;
    border: 1px solid #CCCCCC;
    border-bottom: 1px solid #E0E0E0;
    background: #F0F0F0;
    text-decoration: none;
    color: #333333;
    height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
    background: #FFFFFF;    
}
UL.mytabs LI.current A {
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
    position: relative;
    z-index: 1;
    clear: both;
    border: 1px solid #E0E0E0;
    padding: 10px;
    top: -1px;
    background:#fff;
}

jаvascript

Подгружаем jQuery и такой скрипт:

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function(){
    // Preload tab on page load
    if($(tabsId + ' LI.current A').length > 0){
        loadTab($(tabsId + ' LI.current A'));
    }
    
    $(tabsId + ' A').click(function(){
        if($(this).parent().hasClass('current')){ return false; }
        
        $(tabsId + ' LI.current').removeClass('current');
        $(this).parent().addClass('current');
        
        loadTab($(this));        
        return false;
    });
});

function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');
    
    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}