InkTabs Demo

Без стилей

Это пример внешнего вида без стилей, последущие примеры показаны с использованием bootstrap. Для своих нужд вы можете стилизовать табы как вам угодно.

Контент Один
Контент Два
Контент Три

Стандарт


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs');
  });
</script>

<div class="ink-tabs js-tabs">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel">Контент Один</div>
    <div class="ink-tabs__panel">Контент Два</div>
    <div class="ink-tabs__panel">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три

Вложенные табы


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs');
  });
</script>
Вложенный контент Один
Вложенный контент Два
Вложенный контент Три
Контент Два
Контент Три

Активация другой вкладки


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs-active', {
      defaultTab: 2
    });
  });
</script>

<div class="ink-tabs js-tabs-active">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel">Контент Один</div>
    <div class="ink-tabs__panel">Контент Два</div>
    <div class="ink-tabs__panel">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs-active-2', {
      defaultTab: 'tab-3'
    });
  });
</script>

<div class="ink-tabs js-tabs-active-2">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="tab-1">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="tab-2">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="tab-3">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel" data-tab-panel="tab-1">Контент Один</div>
    <div class="ink-tabs__panel" data-tab-panel="tab-2">Контент Два</div>
    <div class="ink-tabs__panel" data-tab-panel="tab-3">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три

Прокрутка/Отступ


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs-scroll', {
      scroll: true,
      offset: 100
    });
  });
</script>
Контент Один
Контент Два
Контент Три

Hash


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs-hash', {
      hash: true
    });
  });
</script>

<div class="ink-tabs js-tabs-hash">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="hash-1">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="hash-2">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-target="hash-2">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel">Контент Один</div>
    <div class="ink-tabs__panel">Контент Два</div>
    <div class="ink-tabs__panel">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три

Fetch/AJAX/Link


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs');
  });
</script>

<div class="ink-tabs js-tabs">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-load="fetch.html">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button" data-tab-link="https://www.google.com/">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel">Контент Один</div>
    <div class="ink-tabs__panel">Контент Два</div>
    <div class="ink-tabs__panel">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три

A11y false


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = new InkTabs('.js-tabs-a11y');
  });
</script>

<div class="ink-tabs js-tabs-a11y">
  <ul class="ink-tabs__nav">
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Один</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Два</button></li>
    <li class="ink-tabs__item nav-item"><button class="ink-tabs__button" type="button">Три</button></li>
  </ul>
  <div class="ink-tabs__content">
    <div class="ink-tabs__panel">Контент Один</div>
    <div class="ink-tabs__panel">Контент Два</div>
    <div class="ink-tabs__panel">Контент Три</div>
  </div>
</div>
Контент Один
Контент Два
Контент Три