Создание текстовых вкладок на jQuery

Организация содержимого сайта в закладки – это отличный способ уменьшить нагрузку на сервер Вашего сайта. Создание вкладок позволяет пользователю Быстро и удобно просматривать содержимое сайта. С помощью jQuery, создание вкладок, является достаточно простым и быстрым. В этом уроке мы рассмотрим, как это осуществить.

Начнем. Для начала создадим контейнер, который будет содержать весь контент для наших вкладок. Так же создадим неупорядоченный список со ссылками на соответствующий контент. Мы создали ссылки, но еще не создали сам контент. Для этого создадим контейнеры с идентификаторами, которые и есть ссылки в списке.

			    <div  id="container">
					<ul id="tabs">
						<li><a  href="#tab1">Tab 1</a></li>
						<li><a href="#tab2">Tab  2</a></li>
						<li><a href="#tab3">Tab  3</a></li>
					</ul>
					<div  id="tab1">
						<h2>Первый</h2>
						<p>Контент  №1</p>
					</div>
					<div  id="tab2">
						<h2>Второй</h2>
						<p>  Контент №2</p>
					</div>
					<div  id="tab3"
						><h2>Третий</h2>
						<p> Контент №3</p>
					</div>
				</div>
			    

С создание контента закончили. Теперь поработает со стилями. Сначала создадим стиль для основного контейнера, потом приведем в порядок список. Нам необходимо, чтобы список был горизонтальным. И конечно создадим стили управления.

				#container {  
					width:600px; 
					margin:50px auto; 
					border:1px solid #ccc; 
					background:#fff; 
					padding:5px;
				}
				#tabs { 
					list-style:none; 
					margin:3px 0;  
					padding:0; 
				}
				#tabs  li { 
					display:inline; 
					margin:0px 1px 0 0; 
				}
				#tabs li a { 
					padding:4px;  
					text-decoration:none;
					color:#3366cc;  
					border:1px solid #e0e0e0;
					font-size:11px;  
					font-family:Tahoma; 
				}
				#tabs li a:hover { 
					background:#3399cc;  
					color:#f0f0f0; 
				}
				#container div { 
					border:1px solid #ccc;
					padding:5px;  
					background:#eee;
				}
				#tabs li a.selected { 
					background:#eee;
					color:#333;  
					cursor:default;
				}
				

Сейчас займемся непосредственно созданием вкладок. Для этого, как Вы, наверное, уже догадались, мы будем использовать jQuery. Для начала скачайте библиотеку jQuery. Присоедините jQuery к сайту.

<script language="JavaScript" type="text/javascript" src="js/jquery1.4.2.js"></script>

Добавьте код для создания вкладок.

 
				var tabcontainers=$('#container >  div');
			    //скрываем каждый  контейнер
			    tabcontainers.hide();
				$('#tabs > li  a').click(function(){
					//при  нажатии на вкладку навигации
					tabcontainers.hide();
					//показывается  содержимое соответствующего контейнера
					tabcontainers.filter(this.hash).fadeIn();
					$('#tabs >  li a').removeClass('selected');
					$(this).addClass('selected');
					return false;
			    }).filter(':first').click();//ставим значение первой  страницы
				

В первую очередь скрипт делает все содержимое контейнеров невидимым. При нажатии на ссылку скрипт проверяет ее HREF, а затем открывает соответствующий контейнер. На этом все.