Дали за удобство, дали за красота или просто защото някой иска да покаже какво може 
използването на табовете е доста разпространено напоследък. В този урок ще се опитам да ви покажа един от най лесните начини за направата на такива табове с няколко реда CSS, xHTML и малко JavaScript. Надявам се този урок да полезен не само за начинаещи, но и за напреднали.
Стъпка 1 - HTML и CSS
Първото нещо, което ще направим е да създадем HTML документ с име "index.htm". За този урок ще използваме тип на документа XHTML 1.0 Transitional. Ще използваме директория "css" от която ще заредим css файл с име "style.css", както и директория "js", от която ще заредим jQuery библиотеката "jquery-1.4.min.js" и файл с име "scripts.js" в който напишем няколко реда код, които ще ни помогнат за създаването да табовете.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Как да си направим табове "Tabs" с помоща на CSS & jQuery</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.4.min.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </head> <body> </body> </html>
Следващата част от кода стои в бодито на документ-а.
HTML
<div class="container">
<h1>Как да си направим табове "Tabs" с помоща на CSS & jQuery</h1>
<ul class="navi">
<li><a href="#tab_content_1">What is Lorem Ipsum?</a></li>
<li><a href="#tab_content_2">Why do we use it?</a></li>
<li><a href="#tab_content_3">Where does it come from?</a></li>
<li><a href="#tab_content_4">Where can I get some?</a></li>
</ul>
<div class="content">
<div id="tab_content_1" class="single_content">
<h2>What is Lorem Ipsum?</h2>
<!-- Content -->
</div>
<div id="tab_content_2" class="single_content">
<h2>Why do we use it?</h2>
<!-- Content -->
</div>
<div id="tab_content_3" class="single_content">
<h2>Where does it come from?</h2>
<!-- Content -->
</div>
<div id="tab_content_4" class="single_content">
<h2>Where can I get some?</h2>
<!-- Content -->
</div>
</div>
</div>
CSS
body{background:#ffffff;font-family:Tahoma,Arial,Verdana,sans-serif;font-size:11px;line-height:1.2em;margin:0;padding:0}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0}
#page_bg { background: #F3F2F1;}
h1 { color:#8A7C75;font-size:16px;text-align:center;padding:20px 0;}
.container {width: 800px; margin: 0 auto;}
ul.navi {
float: left;
height: 28px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 100%;
}
ul.navi li {
float: left;
height: 27px;
line-height: 26px;
border: 1px solid #ccc;
border-left: none;
margin: 0 0 -1px;
background: #D0CBC8;
overflow: hidden;
}
ul.navi li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 11px;
font-weight:700;
padding: 0 20px;
border: 1px solid #fff;
}
ul.navi li a:hover {
background: #B9B0AC;
}
ul.navi li.active a {
color:#B9B0AC;
}
ul.navi li.active, ul.navi li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.content {
border: 1px solid #ccc;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.single_content {
padding: 20px;
font-size: 1.2em;
}
.single_content h2 {
color:#B9B0AC;
font-weight: normal;
padding-bottom: 10px;
font-size: 20px;
}
.single_content p {
color:#999;
margin:0 0 10px;
font-size:11px;
line-height:normal;
}
Стъпка 2 - Нека раздвижим табовете
За тези, които не са запознати с jQuery, може да разгледайте сайта им тук.
Следващото парче код съдържа коментари, които поясняват действията, които са били извършени.
$(document).ready(function() {
//Action
$('.single_content').hide(); //Скриваме всички елементи които имат клас "single_content"
$('.navi li:first').addClass('active');//добавяме клас "active" на първият елемент "li", който се намира в елемент с клас "navi"
$('.single_content:first').show();//показваме първият елемент с клас "single_content"
//On Click Event
$('.navi li').click(function() {
$('.navi li').removeClass('active');//премахва клас "active" на всички елементи "li", който се намират в елемент с клас "navi"
$(this).addClass('active');//добавя клас "active" елемента активирания елемент
$('.single_content').hide();//Скрива всички елементи които имат клас "single_content"
var activeTab = $(this).find('a').attr('href');
$(activeTab).fadeIn(500);//показва елемента с ефект "fadeIn" за 500 мили секунди
});
});
От опит знам, че човек първо гледа и после чете ето демо и файловете които съм използвал.
| DemoDownload |
Супер, изглежда много леко и лесно за манипулация
Определено ще го изтествам, а може и да го ползвам някъде.
А сега си чакам поръчковия урок