Дали за удобство, дали за красота или просто, защото някой иска да покаже какво може, използването на табовете е доста разпространено напоследък. В този урок ще се опитам да ви покажа един от най-лесните начини за направата на такива табове с няколко реда xHTML, CSS и малко JavaScript. Надявам се техниката да е полезна не само за начинаещи, но и за напреднали.
Стъпка 1 - HTML и CSS
Първото нещо, което ще направим е да създадем HTML документ с име index.htm. За този урок ще използваме тип на документа XHTML 1.0 Transitional. Директорията за стила ще се казва css и от нея ще заредим файл с име style.css, а за JavaScript-а ще ползваме директория 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>
Но преди да продължим нататък... от опит знам, че човек първо гледа, а после чете, така че ето демо и даунлоуд линк към файловете, които съм използвал.
| View DemoDownload |
И така... за непросветлените искам да уточня, че следващата част с HTML код стои между <body> и </body>.
HTML
<div>
<h1>Как да си направим табове "Tabs" с помоща на CSS & jQuery</h1>
<ul>
<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>
<div id="tab_content_1">
<h2>What is Lorem Ipsum?</h2>
<!-- Content -->
</div>
<div id="tab_content_2">
<h2>Why do we use it?</h2>
<!-- Content -->
</div>
<div id="tab_content_3">
<h2>Where does it come from?</h2>
<!-- Content -->
</div>
<div id="tab_content_4">
<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 мили секунди
});
});
Както виждате всичко е много простичко и лесно, но точно тези неща понякога са най-ефективни!
Loading ...
Zdraveite, az neshto ne moga da go podkaram taba :(
probvam se da sloja tabovete po opisanieto ama ne stava :(
iskam da sloja na tab:1 posledni komentari tab:2 nai cheteno i na tab:3 ama nqma :(
Здравей, благодаря за коментара. Ще се радвам да помогна с каквото мога. Може ли да опишеш по-подробно проблема за да можем аз и другите потребители да разберем какъв е той. Ако може да дадеш и линк към страницата на която се опитваш да интегрираш табовете.
Добавих(копирах) инфото от scripts във вече съществуващия файл scripts.
jQuery ми е с версия: jquery-1.3.2.min
И в хедър.пхп добавих
---
Най-четеното
Най-четеното
----
но май не е така :(
сори но поставих кода ама го извади ето така
---
Най-четеното
Най-четеното
----
това е стъпка 1
Може ли да обясниш проблема подробно защото така не можем да ти помогнем.
Във връзка с въпроса на Stoqn - и в поста а също така и в зипа липсва една малка част от скрипта, но ако отвори демото и поиска изходния код ще види липсващата част.
Fridaycode.net
Прегледах файловете и не открих разлика. Ако говориш за реда:
<a href="http://fridaycode.net/" class="logo">Fridaycode.net</a>
Да, няма го в урока, защото няма смисъл от него. Това си е лентата с FridayCode, която е необходима само на демото и в зипа.
Между другото вече има възможност за писане на HTML в коментарите, така че може да пейстнеш проблема пак.
здравейте, много ми хареса концепцията с fading content за всеки таб, опитвам се да го вкарам в моя страница, но се нуждая на едно място от drop down меню. Ще съм ви благодарен ако ми дадете съвети за скрипта :)