Вкладки, скрипт вкладок, вкладки для сайта, вкладки для uCoz, табы

Вкладки (табы)

Нередко при создании или доработке дизайна мы хотим разместить большое количество информации на относительно небольшом участке в шаблоне. Как раз в этом нам с вами и помогут вкладки.

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


В исходном файле 4 вкладки, но их количество очень просто изменить. Для этого сначала добавляем заголовок вкладки:

Код
<li><a href="#tab1">Заголовок вкладки</a></li>
где 1 - порядковый номер вкладки.

А после добавляем содержимое вкладки:

Код
<div id="tab1" class="tab_content">Содержимое вкладки</div>
где 1 - порядковый номер вкладки.

Аналогично с удалением - сначала заголовок, а затем содержимое.


Установка CSS

Теперь начинаем установку на сайт. Копируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.tabs {  list-style: none;  height: 32px;  border-bottom: 1px solid #e0e0e0;  margin: 0;  padding: 0; }  .page_tabs {  list-style: none;  height: 32px;  width: 100%;  margin-top: 10px;  margin-bottom: -20px;  border-bottom: none; }  .tabs li, .page_tabs li {  margin: 0px;  padding: 0px;  float: left;  height: 31px;  line-height: 32px;  border: 1px solid #e0e0e0;  overflow: hidden;  position: relative;  background: #eaeaea url('http://mvcreative.ru/example/18/images/tab-bg.png') repeat-x;  margin-right: 2px;  margin-bottom: -1px;   -webkit-border-top-right-radius: 4px;  -webkit-border-top-left-radius: 4px;  -moz-border-radius-topright: 4px;  -moz-border-radius-topleft: 4px;  border-top-right-radius: 4px;  border-top-left-radius: 4px; }  .page_tabs li.active a {  -webkit-border-top-right-radius: 4px;  -webkit-border-top-left-radius: 4px;  -moz-border-radius-topright: 4px;  -moz-border-radius-topleft: 4px;  border-top-right-radius: 4px;  border-top-left-radius: 4px; }  .tabs li a, .page_tabs li a {  font-weight: bold;  color: #666666;  text-decoration: none;  display: block;  padding: 0px 20px;  outline: none; } .tabs li a:hover, .page_tabs li a:hover {  color: #3DC0E0; }  .tabs li.active, .tabs li.active a, .tabs li.active a:hover, .page_tabs li.active, .page_tabs li.active a, .page_tabs li.active a:hover {  color: #333333;  background: #ffffff;  border-bottom: 1px solid #ffffff;  }  .tab_container {  border: 1px solid #e0e0e0;  border-top: none;  overflow: hidden;  margin-bottom: 20px;  background: #ffffff;  -webkit-border-bottom-right-radius: 4px;  -webkit-border-bottom-left-radius: 4px;  -moz-border-radius-bottomright: 4px;  -moz-border-radius-bottomleft: 4px;  border-bottom-right-radius: 4px;  border-bottom-left-radius: 4px; }  .tab_content {  margin: 19px; /* 20 - border */ }

Установка HTML

Этот код копируем и вставляем в любое удобное для вас место. Ширина блока с вкладками зависит от блока, в котором они находятся.

Код
<ol class="tabs">  <li><a href="#tab1">Первая</a></li>  <li><a href="#tab2">Вторая</a></li>  <li><a href="#tab3">Третья</a></li>  <li><a href="#tab4">Четвёртая</a></li> </ol>  <div class="tab_container"> <div id="tab1" class="tab_content"> Содержимое первой вкладки </div> <div id="tab2" class="tab_content"> Содержимое второй вкладки </div> <div id="tab3" class="tab_content"> Содержимое третьей вкладки </div> <div id="tab4" class="tab_content"> Содержимое четвёртой вкладки </div> </div>

Установка JS

Вставляем этот код перед тегом </body>.

Код
<script type="text/javascript" src="http://mvcreative.ru/example/18/js/tabs.js"></script>

Установка скрипта вкладок на этом завершена.

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Веб детали html css js ∫ Просмотров: 11008 ∫ 23.11.20135.0
» Оцени и добавь:
оцени статью
5.0
5 Комментариев Поделись своим мнением
#5 Написал aleksey_dekster, 24.07.2015 10:19
Цитатнуть
Сделайте вариант с cookie
#4 Написал Рокка_Максим, 09.10.2014 11:43
Цитатнуть
Добрый день. Возможно узнать, содержимое табов будет индексироваться? возможно ли как-то сделать ссылку на один из табов?
#3 Написал Oregon, 27.12.2013 21:31
Цитатнуть
Здесь можно деактивировать все кнопки сразу?
#2 Написал Cranimadverter, 15.12.2013 15:27
Цитатнуть
если честно недавно этим занимаюсь умею там скрипты писать , но этот как то очень просто написан =) , спс чуваки я у себя что бы такое сделать долго мучался.
#1 Написал TRANE73, 26.11.2013 12:45
Цитатнуть
5+ за красивый JS B)
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина