Как реализовать такие табы или с помощью чего?

Question

[De Slow]

Cкриншот пример:
Как реализовать такие табы, по которым были бы видны другие, но при этом же был виден товар
При нажатии на вид товара (Куртки), предположим выводились только куртки

Comments

[Модератор]

3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

Загрузите изображение на хабрасторадж

[De Slow]

Модератор, поправил

Answer 1

[Vitaliy Orlov]

использовать вложенные кнопки фильтры

<div id="tab-controls">
    <button data-tab="tab-1">Tab 1</button>
    <button data-tab="tab-2">Tab 2</button>
    <button data-tab="tab-3">Tab 3</button>
</div>

<div id="tab-1">
    <button id="tab-1-filter-1">Filter 1</button>
    <button id="tab-1-filter-2">Filter 2</button>
    <button id="tab-1-filter-3">Filter 3</button>
    <div clas="tab-content">
         <div class="tab-1-element filter-1 filter-2" ></div>
    ...
    </div>
</div>

<script>
$('#tab-1-filter-1').click(e=>{
      $('.tab-1-element').hide().filter(':has(.filter-1)').show();
});
</script>