Табы для uCoz

Табы для uCoz

04.07.2015280512

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

В исходном файле 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

Для того что бы наши вкладки начали функционировать примени к ним JavaScript который установим перед тегом </body>.

Код
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tabs li:first-child").addClass("active");
$(".tab_content:first-child").show();
$(".tabs li").click(function() {
if (!$(this).hasClass("active")) {
$(this).parent().find("li").removeClass("active");
$(this).parent().next().find(".tab_content").hide();

var activeTab = $(this).find("a").attr("href");
$(this).addClass("active");
$(this).parent().next().find(activeTab).fadeIn();
}
return false;
});
});
</script>

Установка скрипта на этом завершена. Отписываемся в комментариях про сам скрипт.

Источник: http://mvcreative.ru/blog/vkladki_tabs/2013-11-23-36




Сохраните в социальную сеть
Комментарии (12)
Если бы еще на куках это все дело было...
0
Денис Минов 04.07.2015 в 09:56Спам
Ну смотря для чего применять. Если применить табы как, например, вывод каких-то модулей - то было бы не плохо использовать куки.
А если использовать как для вывода информации, то и так пойдёт.
1
Опишите мне хотя бы парочку примеров, где это необходимо и важно!
1
Денис Минов 04.07.2015 в 17:28Спам
Если у Вас нет идей, то это не означает что скрипт не нужный.
0
Причём тут мои идеи, у меня их хватает, мне хочется узнать хотя бы один пример, где куки необходимы.
1
David 04.07.2015 в 19:34Спам
Просто с табами удобнее вот и все) А табы с куками - еще лучше)
1
Неплохо*
0
Марк Яковенко 05.07.2015 в 11:16
Табы можно использовать как переключатель переводов для сериалов. Я так раньше использовал.
0
Delirious 21.07.2015 в 09:01Спам
Можете доработать, чтобы было с куками
0
Delirious 23.07.2015 в 11:05Спам
Будем очень благодарны
0
12345 20.08.2015 в 13:15Спам
Спасибо за скрипт.
Для себя открыл, что на этом скрипте можно меню сделать с дополнительным выводом в пункты любой информации (рекламу,последнюю новость и т.д.).
1
Александр 02.10.2016 в 18:08Спам
Полностью рабочие табы,я их использую для комментариев ,то бишь 1 вкладка (Стандартная форма) 2 вкладка(комментарии через соц сеть вк) 3 вкладка(фейсбук),но вот не подскажите ,когда переключаю страницу вверх дёргает ,ну не много ,но всё равно ,уползает вверх ,подскажите ,что можно сделать
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт