Как сделать переключатель страниц?

Question

[WoodyAndBuzz]

Не знаю как правильно сформулировать вопрос. Нужно в-общем, сделать так, чтобы при нажатии на каждую кнопку выходили свое число определённых картинок. Например жмем на HOME и выходит шесть картинок, жмем на Office три картинки, жмем на ALL выводит весь список картинок. Просьба не ругаться, если тема простая. Я новичок.

<div class="header2">
                <ul class="menu2 clearfix">
                    <li class="menu-list2"><a href="" class="menu-link2 buttonAll menu-link-active2">ALL</a></li>
                    <li class="menu-list2"><a href="" class="menu-link2 buttonHome">HOME</a></li>
                    <li class="menu-list2"><a href="" class="menu-link2 buttonOffice">OFFICE</a></li>
                    <li class="menu-list2"><a href="" class="menu-link2 buttonFurniture">FURNITURE</a></li>
                    <li class="menu-list2"><a href="" class="menu-link2 buttonModern">MODERN</a></li> 
                    <li class="menu-list2"><a href="" class="menu-link2 buttonClassic">CLASSIC</a></li>    
                </ul>
            </div>
            <div class="image imageAll">
                <img class="jpeg" src="../home/lamp-1.jpeg" alt="lamp-1">
                <img class="jpeg" src="../home/lamp-2.jpeg" alt="lamp-2">
                <img class="jpeg" src="../home/lamp-3.jpeg" alt="lamp-3">
                <img class="jpeg" src="../home/lamp-4.jpeg" alt="lamp-4">
                <img class="jpeg" src="../home/lamp-5.jpeg" alt="lamp-5">
                <img class="jpeg" src="../home/lamp-6.jpeg" alt="lamp-6">
                <img class="jpeg" src="../home/lamp-1.jpeg" alt="lamp-1">
                <img class="jpeg" src="../home/lamp-2.jpeg" alt="lamp-2">
                <img class="jpeg" src="../home/lamp-3.jpeg" alt="lamp-3">
                <img class="jpeg" src="../home/lamp-4.jpeg" alt="lamp-4">
                <img class="jpeg" src="../home/lamp-5.jpeg" alt="lamp-5">
                <img class="jpeg" src="../home/lamp-6.jpeg" alt="lamp-6">
            </div>

Comments

[Beliyadm]

Гуглить на тему "табы на CSS и Javascript". Можно на чистых стилях, можно с использованием скриптов.
Примеры: https://codepen.io/Lewitje/pen/doJRBX или https://codepen.io/wallaceerick/pen/nRyxPz

[Сергей Сергей]

Это задача фильтрации. Новичку нужно поразмышлять об общих понятиях работы с данными и восприятием информации. Здесь же видно только поверхностное представление о связи "кнопочек" с количеством "картиночек".

[WoodyAndBuzz]

Beliyadm, А как сделать так, теперь при уменьшении картинок у нижнего блока остается пустое место. Как его убрать?

Answer 1

[Алексей Скляров]

Алгоритм:
1. Каждой картинке задаете data-атрибут с категорией, например: [data-category="office"]
2. На кнопки вешаете обработчик клика, при клике по кнопке скрываем все изображения и показываем только с нужным [data-category="office"]