Aved2
Если еще актуально
Код:
<!--Контент слайдера-->
<ul class="tabs">
<li class="active"><a href="#tab1">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
<li><a href="#tab4">Вкладка 4</a></li>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab1" style="display: block;">
<table cellspacing="10" width="100%">
<tbody>
<tr>
<td width="50%" rowspan="2">Приветствие</td>
<td width="50%">Администраторы</td>
</tr>
<tr>
<td width="50%">Модераторы</td>
</tr>
</tbody>
</table>
</div>
<div class="tab_content" id="tab2" style="display: none;">
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
</div>
<div class="tab_content" id="tab3" style="display: none;">
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
</div>
<div class="tab_content" id="tab4" style="display: none;">
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
</div>
</div>
<!--/Контент слайдера-->
<!--Стили слайдера-->
<style type="text/css">
ul.tabs {
float: left;
list-style: none outside none;
margin-left: -2px;
padding: 0px;
width: 100%;
}
ul.tabs li {
float: left;
overflow: hidden;
padding: 0px;
position: relative;
width: 200px;
text-align: center;
}
ul.tabs li.active {
color: #000000;
}
ul.tabs li a {
outline: medium none;
padding: 0px 10px;
}
ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active {
color: #000000;
}
.tab_container {
overflow: hidden;
clear: both;
width: 800px;
}
.tab_content {
padding: 5px;
}
</style>
<!--/Стили слайдера-->
<!--Do magic :)-->
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
