Скрипты

grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...
live-chat-3-v3-7-онлайн-чат-поддержки Live Chat 3 - лучший способ помочь своим клиентам. Это намного быстрее, чем электронная почта и более эффективней, чем телефон. Не оставляйте своих...
repairer-2-3-система-управления-мастерской Система управления мастерской по ремонту электроники и т.д. Это на самом деле инновационный, простой и мощный инструмент управления. Это просто Ваш...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Вкладки на CSS и jQuery

jquery_vkl

 

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

k_prim2

Шаг -1 Начнём  с HTML

Для меню вкладок используем неупорядоченный список, далее создаём контейнер div с классом tab_container и в нём ещё два div контейнера, id у которых такие же как и атрибут у href в списке вкладок.

<ul class="tabs">
<li><a href="#tab1">Галерея/a></li>
<li><a href="#tab2">Контакты‹</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Контент-->
</div>
<div id="tab2" class="tab_content">
<!--Контент-->
</div>
</div>

Normal 0 false false false RU X-NONE X-NONE

Шаг-2 CSS

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; /*--Вытягивание списка вниз на 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; /*-- Normal 0 false false false RU X-NONE X-NONE Белая граница в 1px внутри неактивного элемента списка--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*-- Normal 0 false false false RU X-NONE X-NONE Проверяем
 активность  вкладки, делаем не восприимчивой к наведению
--*/
background: #fff;
border-bottom: 1px solid #fff; /*-- Normal 0 false false false RU X-NONE X-NONE Закрываем
нижнюю
границу, создаём видимость соединения с контентом
--*/
}
.tab_container {/*- Normal 0 false false false RU X-NONE X-NONE Стили контента вкладок --*/
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;
}
 

Шаг -3

Теперь jQuery

$(document).ready(function() {
// Normal 0 false false false RU X-NONE X-NONE Когда страница загружается......
$(".tab_content").hide(); // Normal 0 false false false RU X-NONE X-NONE Скрыть весь контент
$("ul.tabs li:first").addClass("active").show(); // Normal 0 false false false RU X-NONE X-NONE Активировать первую вкладку
$(".tab_content:first").show(); // Normal 0 false false false RU X-NONE X-NONE Показать контент первой вкладку
//Событие по клику
Normal 0 false false false RU X-NONE X-NONE $("ul.tabs li").click(function() {
 
$("ul.tabs li").removeClass("active"); //Удаление любого "active"
класса
$(this).addClass("active"); //
Normal 0 false false false RU X-NONE X-NONE Добавление
"active" класса на активную вкладку

$(".tab_content").hide(); //
Normal 0 false false false RU X-NONE X-NONE Скрыть
контент вкладок

 
var activeTab = $(this).find("a").attr("href"); // Normal 0 false false false RU X-NONE X-NONE Найти
href значение атрибута для выявления активной вкладки и контента
$(activeTab).fadeIn();

 



return false;
});
 
});
 

Исходник

k_ck

<!--Контент-->


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...