
	Добро пожаловать в студию графики и веб-дизайна Art-Color

Добро пожаловать на StudioAC.ru. Наша дизайн студия занимается разработкой web сайтов, созданием дизайнов сайта.Так как большенство людей не умеют, или не имеют возможности рисовать профессиональную графику, мы делаем это за них.Графика для сайтов - это создание баннеров, создание шапки и остально мелочи которая нужна что бы ваш сайт был привлекательным и запомнился посетителю. Так же наш сайт предоставляет готовую графику. В неё входят готовые шаблоны сайтов, только уникальные скрипты, кнопки для сайтов а так же PSD файлы. Мы выкладываем только авторские изделия, то есть все что есть у нас на сайте - это все работа нашей команды.

Переключатели (Табы) на jQuery

22.12.2024

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

Сегодня мы будем делать переключатели (табы),или вкладки. Такие вкладки очень удобны в использовании,и очень пригодятся, особенно если вам нужно сэкономить место на сайте.

Переключатели можно использовать для различных целей. Я вот много раз видел скрипт Ucoz "переключатель как в админке". Честно говоря, выглядит переключатель ужасно. Вот я доработал стандартный плагин jquery.

Вкладки серого цвета по умолчанию, не используются картинки, так что фон можно свободно поменять, редактируя аттрибут css background. Итак, начнем!

Шаг 1. HTML/CSS

Будет использоватся ненумерованный список на html. Ссылки для переключателей будут такие: #tab1, #tab2, и т.д. Для содержимого вкладок будет использоватся DIV с id "tab1,tab2,и т.д." и с class "tab_content".

HTML

Code

<ul class="tabs">
  <li><a href="#tab1">Вкладка 1</a></li>
  <li><a href="#tab2">Вкладка 2</a></li>
</ul>

<div class="tab_container">
  <div id="tab1" class="tab_content">
  
  </div>
  <div id="tab2" class="tab_content">
  
  </div>
</div>

CSS для вкладок

Code

ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px; /*--Высота вкладок--*/
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px;
  line-height: 31px; /*--Делаем текст по центру--*/
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px;
  overflow: hidden;
  position: relative;
  background: #e0e0e0;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #fff;
  outline: none;
}
ul.tabs li a:hover {
  background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Снимаем атрибут hover с активной вкладкки--*/
  background: #fff;
  border-bottom: 1px solid #fff;
}

CSS содержимого

Code

.tab_container {
  border: 1px solid #999;
  border-top: none;
  overflow: hidden;
  clear: both;
  float: left; width: 100%;
  background: #fff;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}

Оба кода CSS вставляем в вашу таблицу стилей,или создаем новую и подключаем в head.

Шаг 2. jQuery

Тут я использовал скрипт из стандартного плагина.

Code

$(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; });});

Желательно создать файл js и все это скопировать в него. А потом подключить скрипт в <head></head>

Вот и все. Готово!

Теперь у вас есть удобные переключатели на CSS/jQuery.

Обсудить