Ajax вкладки
Сделаем вкладки (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');
});
}Ссылки
