<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU-lite">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Табы при помощи jQuery | Блог Интернет Технологий</title>
<script type="text/javascript" src="http://bitby.net/wp-demo/web/files/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.tabNavigation li:last").css("border-bottom", "1px solid #333");
});
$(function () {
var tabContainers = $('div.tabcontent div.tabs-cont div'); // Заменяем переменной все div находящиеся в .tabs-cont.
tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого.
$('div.tabcontent ul.tabNavigation a').click(function () { // Действие происходит при клике на ссылку.
tabContainers.hide(); // Все div'ы прячем.
tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки.
$('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Удаляем у всех ссылок класс selected.
$(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули.
return false;
}).filter(':first').click(); // При загрузке, автоматически присваеваем первой ссылке класс selected.
});
</script>
<style>
*{margin:0;padding:0;}
body {
margin: 100px auto;
width:1000px;
}
a{outline:none;color:#333;text-decoration:none;display:block;}
img{border:none;}
ul{float:left;width:75px;}
li{
list-style:none;
border:1px solid #333;
border-bottom:0;
background:#ccc;
width:74px;
text-align:center;
}
.tabcontent{
border:0px solid #333;
}
.selected{
background:#ebebeb;
}
.tabs-cont{margin-left:100px;padding:5px 10px;border:1px solid #333;}
.clear{clear:both;}
</style>
<div class="tabcontent">
<ul class="tabNavigation">
<li><a href="#One"><img src="http://bitby.net/wp-demo/images/home.png" alt="" /></a></li>
<li><a href="#Two"><img src="http://bitby.net/wp-demo/images/people.png" alt="" /></a></li>
<li><a href="#Three"><img src="http://bitby.net/wp-demo/images/pencil.png" alt="" /></a></li>
<li><a href="#Four"><img src="http://bitby.net/wp-demo/images/phonebook.png" alt="" /></a></li>
</ul>
<div class="tabs-cont">
<div id="One">
Первая ссылка
</div>
<div id="Two">
Вторая ссылка
</div>
<div id="Three">
Третья ссылка
</div>
<div id="Four">
Четвертая ссылка
</div>
</div>
</div>
</body>
</html>
