Как сверстать блоки табами по 3

03 мая 2021, 15:40

В десктопной версии это выглядит вот так http://prntscr.com/om0l1m А для мобильной версии нужно вот так http://prntscr.com/om0maz Как реализовать в мобильной версии такие табы (табы слайдер) ?

Answer 1

Не идеально работает, но суть, думаю, должна быть понятна

https://codepen.io/hisbvdis/pen/LwyZZZ

function showSchedule(id) { 
  var els = document.getElementsByClassName('schedules__list'); 
  var el = document.getElementById('schedule' + id); 
 
  for (var i = 0; i < els.length; i++) { 
    els[i].style.display = "none"; 
    els[i].removeAttribute('style'); 
  } 
  els[0].style.display = "none"; 
  el.style.display = "block"; 
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
body { 
  min-height: 100vh; 
} 
 
 
/* ..names */ 
 
.names { 
  display: flex; 
  /* justify-content: space-between; */ 
  padding: 15px 0; 
  list-style: none; 
} 
 
.names__item { 
  flex-basis: calc(100% / 7 - 10px); 
  padding: 0 15px; 
  cursor: pointer; 
} 
 
 
/* ..schedules */ 
 
.schedules { 
  display: flex; 
  justify-content: space-between; 
  list-style: none; 
} 
 
.schedules__list { 
  flex-basis: calc(100% / 7 - 10px); 
  list-style: none; 
} 
 
@media (max-width: 999px) { 
  .names { 
    overflow-x: scroll; 
  } 
  .schedules__list { 
    flex-basis: 100%; 
  } 
  .schedules__list:nth-child(n+2) { 
    display: none; 
  } 
} 
 
@media (min-width: 1000px) { 
  .schedules__list { 
    display: block; 
  } 
} 
 
 
/* ..training */ 
 
.training { 
  margin-bottom: 10px; 
  color: #fff; 
  background: #E30613; 
}

<section> 
 
  <ul class="names"> 
    <li class="names__item" onclick="showSchedule(1)">Понедельник</li> 
    <li class="names__item" onclick="showSchedule(2)">Вторник</li> 
    <li class="names__item" onclick="showSchedule(3)">Среда</li> 
    <li class="names__item" onclick="showSchedule(4)">Четверг</li> 
    <li class="names__item" onclick="showSchedule(5)">Пятница</li> 
    <li class="names__item" onclick="showSchedule(6)">Суббота</li> 
    <li class="names__item" onclick="showSchedule(7)">Воскресенье</li> 
  </ul> 
 
  <div class="schedules" id="schedules"> 
    <ul class="schedules__list" id="schedule1"> 
      <li class="training schedule__training"> 
        <p class="training__place">Понедельник</p> 
        <h3 class="training__name">Понедельник</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule2"> 
      <li class="training schedule__training"> 
        <p class="training__place">Вторник</p> 
        <h3 class="training__name">Вторник</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule3"> 
      <li class="training schedule__training"> 
        <p class="training__place">Среда</p> 
        <h3 class="training__name">Среда</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule4"> 
      <li class="training schedule__training"> 
        <p class="training__place">Четверг</p> 
        <h3 class="training__name">Четверг</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule5"> 
      <li class="training schedule__training"> 
        <p class="training__place">Пятница</p> 
        <h3 class="training__name">Пятница</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule6"> 
      <li class="training schedule__training"> 
        <p class="training__place">Суббота</p> 
        <h3 class="training__name">Суббота</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
    <ul class="schedules__list" id="schedule7"> 
      <li class="training schedule__training"> 
        <p class="training__place">Воскресенье</p> 
        <h3 class="training__name">Воскресенье</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
      <li class="training"> 
        <p class="training__place">Уличная площадка</p> 
        <h3 class="training__name">Функциональная тренировка</h3> 
        <p class="training__gender">женская</p> 
        <p class="training__coach">Анна Мацкевич</p> 
        <p class="training__time">19.00 - 20.00</p> 
      </li> 
    </ul> 
  </div>