Сегодня мы сделаем адаптивные вкладки для сайта, так называемые табы

В HTML-файле создадим структуру будущих табов: обёртку для табов - mywrap-tabs, сами вкладки - mytabs (активный таб и неактивный), и содержимое вкладок - mycontent (так же активное и неактивное содержимое в зависимости от выбранной вкладки).

<div id="mywrap-tabs" class="mywrap-tabs">
  <div class="mytabs">
    <div class="mytab active">CSS</div>
    <div class="mytab">SASS</div>
  </div>
  <div class="mytabs">

  </div>
  <div class="mycontent">
    <div class="mytab-content active">
      1
    </div>
    <div class="mytab-content">
      2
    </div>
  </div>
</div>

Стилизация табов в css-файле

.mywrap-tabs {
  max-width: 100%;
  margin: 38px auto;
  font-family: sans-serif;
}
.mywrap-tabs .mytabs {
  background-color: #262938;
}
.mywrap-tabs .mytabs:first-child { padding: 7px; }
.mywrap-tabs .mytabs::after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}
.mywrap-tabs .mytabs .mytab {
  float: left;
  border-top: 4px solid #53798f;
  padding: 9px 19px;
  background-color: #375566;
  color: #fafaf1;
  transition: background-color .25s linear;
  cursor: pointer;
}
.mywrap-tabs .mytabs .mytab:hover {
  background-color: #304c5c;
  color: #fafaf1;
}
.mywrap-tabs .mytabs .mytab.active {
  background-color: #213c4b;
  color: #fafaf1;
  border-top: 4px solid transparent;
}
.mywrap-tabs .mycontent {
  color: #fafaf1;
  background-color: #213c4b;
  padding: 6px 11px;
}
.mywrap-tabs .mycontent .mytab-content {
  display: none;
  padding: 14px 9px;
}
.mywrap-tabs .mycontent .mytab-content.active { display: block; }

И главная магия в js-файле с помощью jQuery.

$(function() {
  $('#mywrap-tabs').on('click', '.mytab', function() {

    var tabs = $('#mywrap-tabs .mytab'),
    cont = $('#mywrap-tabs .mytab-content');

    //Удяляем классы active

    tabs.removeClass('active');
    cont.removeClass('active');

    //Добавляем класссы active

    $(this).addClass('active');
    cont.eq($(this).index()).addClass('active');

    return false;
  });
});

Результат

See the Pen Gorizontal tabs by Nikolay (@Only-to-top) on CodePen.

Изучаем английский
EnglishRussian
TabsВкладки
WrapОбёртка
AfterПосле
TransparentПрозрачный