Скрипт простых табов/вкладок на js для ucoz

Ничего особенного в скрипте вы найдете. Это самый простой скрипт вкладок/табов на js с использованием всем известной библиотеки jQuery. Сам скрипт реализован в буквально в пять строк. Можно добавлять сколько угодно табов — устройство думаю всем будет понятно. В общем — если вы искали простой скрипт табов — вы его нашли.

Код в песочнице: cmTabs by iCooLER

P.S. Код написан за 10 минут и НЕ является полноценным и универсальным решением!

HTML

HTML:

<div class="cm-tabs">
  <ul class="cm-tabs__nav">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <div style="clear: both;"></div>
  <ul class="cm-tabs__row">
    <li class="cm-tabs__cell">
      блок #1
    </li>
    <li class="cm-tabs__cell">
      блок #2
    </li>
    <li class="cm-tabs__cell">
      блок #3
    </li>
  </ul>
</div>

CSS (кастомизируйте под свой дизайн как угодно)

HTML:

.cm-tabs {  width: 210px;  overflow: hidden; }
.cm-tabs .cm-tabs__nav {  width: 240px;  margin-bottom: 5px; }
.cm-tabs .cm-tabs__nav, .cm-tabs .cm-tabs__row {  width: 240px;  padding: 0px;  margin: 0px; }
.cm-tabs .cm-tabs__nav li {
  float: left;
  width: 65px;
  color: #fff;
  padding: 3px 0 2px 0;
  margin-right: 4px;
  height: 20px;
  border-radius: 3px;
  background: #111;
  margin-bottom: 3px;
  border: 1px solid #222;
  list-style: none;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.cm-tabs .cm-tabs__nav li.active, .cm-tabs .cm-tabs__nav li:hover { color: green; }

.cm-tabs .cm-tabs__row li.cm-tabs__cell { display: none; }
.cm-tabs .cm-tabs__row li.active { display: block; }

JS

Код:

$(document).ready(function() {
  $('.cm-tabs .cm-tabs__nav li:eq(0), .cm-tabs .cm-tabs__row li.cm-tabs__cell:eq(0)').addClass('active');

  $('.cm-tabs .cm-tabs__nav li').on('click', function() {
    $('.cm-tabs .cm-tabs__nav li, .cm-tabs .cm-tabs__row li.cm-tabs__cell').removeClass('active');
    $('.cm-tabs .cm-tabs__row li.cm-tabs__cell:eq(' + $(this).addClass('active').index() + ')').addClass('active');
  });
});