Простые вкладки (табы) на JQUERY для uCoz

7145 просмотров Alan_Writer 15.11.2014

Демо ▶️

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{}, вкладки из горизонтальных преобразуются в вертикальный аккордион.

Вкладки помогают компактно разместить большое количество контента в одном месте, к примеру если у вас кино-сайт - можно в нескольких вкладках разместить разные видеоплееры, или комментарии разных систем (например комментарии сайта и ВК, как это сделано здесь) разместить во вкладках, чтоб они были в одном блоке.

Установка

1. Это html-каркас самих вкладок. Их ставите по месту, и меняете заголовки и содержание вкладок на свои:
Код
<ul class="accordion-tabs">
<li class="tab-head-cont">
<a href="#" class="is-active">Вкладка 1</a>
<section><p>Содержание вкладки 1</p></section>
</li>
<li class="tab-head-cont">
<a href="#">Вкладка 2</a>
<section><p>Содержание вкладки 2</p></section>
</li>
<li class="tab-head-cont">
<a href="#">Вкладка 3</a>
<section><p>Содержание вкладки 3</p></section>
</li>
<li class="tab-head-cont">
<a href="#">Вкладка 4</a>
<section><p>Содержание вкладки 4</p></section>
</li>
</ul>
** Тут для примера заготовлено 4 вкладки, но их может быть столько - сколько вам нужно.

2. Сразу после блока вкладок пропишите сам jQuery-скрипт:
Код
<script>
$(document).ready(function () {
$('.accordion-tabs').children('li').first().children('a').addClass('is-active')
.next().addClass('is-open').show();
$('.accordion-tabs').on('click', 'li > a', function(event) {
if (!$(this).hasClass('is-active')) {
event.preventDefault();
$('.accordion-tabs .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('.accordion-tabs').find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
} else {
event.preventDefault();
}
});
});
</script>

3. И последнее, в свой основной CSS-файл или шаблон - вставьте стили вкладок:
Код
/* TABS */

.accordion-tabs {
  *zoom: 1;
  width: 60%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 1.5em auto;
  padding-left:0;}

.accordion-tabs:before, .accordion-tabs:after {
  content: " ";
  display: table;}

.accordion-tabs:after {clear: both;}
.accordion-tabs li {list-style:none;}

.accordion-tabs li.tab-head-cont:first-child a {
  border-radius: 4px 4px 0px 0px;
  border-top: 0;}

.accordion-tabs li.tab-head-cont:last-child a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

.accordion-tabs li.tab-head-cont a {
  text-decoration:none;
  border-top: 1px solid #ddd;
  color: #888;
  display: block;
  padding: 14px;}

.accordion-tabs li.tab-head-cont a:hover {color: #000;}
.accordion-tabs li.tab-head-cont a:focus {outline: none;}

.accordion-tabs li.tab-head-cont a.is-active {
  background-color: #f7f7f7;
  border-bottom: 0;
  color:#333;}

.accordion-tabs li.tab-head-cont section p {
  padding: 14px;
  margin: 0px;}

.accordion-tabs li.tab-head-cont section {
  text-align:left;
  background: #f7f7f7;
  display: none;
  overflow: hidden;
  width: 100%;}
   
/* RESPONSIVE */

@media screen and (min-width: 50em) {
.accordion-tabs {
  border: none;
  position: relative;}

.accordion-tabs li.tab-head-cont {display: inline;}
.accordion-tabs li.tab-head-cont:last-child a {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;}

.accordion-tabs li.tab-head-cont a {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  border-top: 0;
  border-radius: 4px 4px 0px 0px;}

.accordion-tabs li.tab-head-cont a.is-active {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-bottom: 1px solid #f7f7f7;
  margin-bottom: -1px;}

.accordion-tabs li.tab-head-cont section {
  border-radius: 4px;
  border: 1px solid #ddd;
  float: left;
  left: 0;}
}

Если все сделано правильно, то на этом все.

Теги: аккордион, jQuery, табы, для uCoz, вкладки, адаптивные
0 Комментариев