<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS3 и jQuery = стильные закладки | Материалы сайта RUSELLER.COM</title>
<style>
body
{
width: 900px;
margin: 100px auto 0 auto;
font-family: Arial, Helvetica;
font-size: small;
background: #444;
}
/* ------------------------------------------------- */
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a,
#tabs #current a::after{
background: #fff;
z-index: 3;
}
/* ------------------------------------------------- */
#content
{
background: #fff;
padding: 10px 0px 0px 0px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 0 0;
}
h6 {margin:5px; font-size:1em;}
/* ------------------------------------------------- */
#about
{
color: #999;
}
#about a
{
color: #eee;
}
table, td, tr {border:1px solid #ad100e;}
</style>
</head>
<body>
<ul id="tabs">
<li><a href="#" title="tab1">Пн</a></li>
<li><a href="#" title="tab2">Вт</a></li>
<li><a href="#" title="tab3">Ср</a></li>
<li><a href="#" title="tab4">Чт</a></li>
<li><a href="#" title="tab5">Пт</a></li>
</ul>
<div id="content">
<div id="tab1">
<h6>Комплексный обед «32»</h6>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<!-- КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник" -->
<tr bgcolor="ab100e">
<td colspan="3"><span class="d">Понедельник ДД.ММ.ГГГГ</span></td>
</tr>
<tr bgcolor="e9b43a">
<td align="center" width="5">№<br>Комп.</td>
<td align="center">Блюдо</td>
<td align="center" width="50">Вес, г</td>
</tr>
<!-- КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник" "Комплекс 55" -->
<tr bgcolor="f0d79f">
<td rowspan="4"><span class="k">51</span></td>
<td><span class="b">Ххххх, хххх, хххх ... ххх.</span></td>
<td><span class="v">ХХХ</span></td>
</tr>
<tr bgcolor="f0d79f">
<td><span class="b">Ххххх, хххх, хххх ... ххх.</span></td>
<td><span class="v">ХХХ</span></td>
</tr>
<tr bgcolor="f0d79f">
<td><span class="b">Ххххх, хххх, хххх ... ххх.</span></td>
<td><span class="v">ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><span class="b">Ххххх, хххх, хххх ... ххх.</span></td>
<td><span class="v">ХХХ</span></td>
</tr>
</table>
</div>
<div id="tab2"> таблица ВТ </div>
<div id="tab3"> таблица Ср </div>
<div id="tab4"> таблица Чт </div>
<div id="tab5"> таблица Пт</div>
</div>
<!-- Тут подключается скрипт и привязывается к блокам закладок -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide(); // Скрываем содержание
$("#tabs li:first").attr("id","current"); // Активируем первую закладку
$("#content div:first").fadeIn(); // Выводим содержание
$('#tabs a').click(function(e) {
e.preventDefault();
$("#content div").hide(); //Скрыть все сожержание
$("#tabs li").attr("id",""); //Сброс ID
$(this).parent().attr("id","current"); // Активируем закладку
$('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
});
})();
</script>
<!-- END -->
</body>
</html>
