Вкладки на JavaScript для uCoz

365 07.12.2015 в 23:16 ILNUROFF

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

Установка:
Для начала в CSS вставляете код:

Код

.body {
  font-family: "PT Sans";
  font-size: 16px;
  line-height: 1.5;
  }

  .tabs {
  border: 1px solid #ddd;
  position: relative;
  margin-top: 5rem;
  margin-bottom: 3rem;
  }

  .tabs__section {
  margin: 1rem;
  }

  .tabs__navigation {
  margin-left: -1px;
  position: absolute;
  top: -34px;
  }

  .tabs__link {
  display: inline-block;
  border: 1px solid #ddd;
  text-decoration: none;
  padding: .25rem .75rem;
  color: #B3B3B3;
  background: #E7E7E7;
  margin-left: .25rem;
  }

  .tabs__link:first-child {
  margin-left: 0;
  }

  .tabs__link--active {
  font-weight: bold;
  border-bottom-color: #fff;
  background: #fff;
  color: #186baa;
  }

Потом, вставляете JavaScript между <head> и </head>:

Код

Где хотите видеть вкладки:

Код

<div class="body">
<div class="tabs">
  <nav class="tabs__navigation">
  <a class="tabs__link tabs__link--active" href="#first">первая секция</a>
  <a class="tabs__link" href="#second">вторая секция</a>
  <a class="tabs__link" href="#third">третья секция</a>
  <a class="tabs__link" href="#fourth">четвёртая секция</a>
  </nav>
  <p class="tabs__section" id="first">Ваша информация...</p>
  <p class="tabs__section" id="second">Ваша информация...</p>
  <p class="tabs__section" id="third">Ваша информация...</p>
  <p class="tabs__section" id="fourth">Ваша информация...</p>
  </div>
</div>

И перед </body> вставляете:

Код

Пользовательские классы для вкладок на JavaScript:
var className = 'tab', // Общий класс ссылок
activeClassName = 'tab--active' // Класс активной ссылки
pureTabs.init(className, activeClassName);

Мне нравится4 Скачать1.4 Kbзагрузок: 2