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

Обыскал весь интернет не могу понять, это реализовывать через пагинацию? или все таки можно как то при помощи css сделать? К чему спрашиваю, просто есть какие нибудь еще способы сделать разделение страниц но только без js?Скриншот во вложении...

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

Дополнительно:

Кхм... Странно, что ты не понял это по названием 🙂

Это обычные табы, при клике просто меняется контент внизу))

  • HardBot, только плохой вариант реализовывать это табами
  • Danny Arty, почему?
  • HardBot, потому что судя по переключателю "Показать все", должен быть таб, в котором отображаются все. Получается что каждая карточка/блок в таком случае будет выводится на страницу по 2 раза - 1 раз в табе "Показать все", и 1 раз в табе своей категории. Лучше такое реализовать в виде галереи с isotope-фильтрами
  • Danny Arty, аа, ну кст да, я этот момент не учёл
  • это не табы, это сортировка. типа isotope

    • Ответы:

    Пагинация — это порядковая нумерация страниц, которую используют на сайте для последовательного отображения контента.
    У вас же это табы (они же вкладки). И в макете у вас это написано: "tabs".

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

    Делаются они не сложно. Можно реализовать как на чистом css, так и с использованием js.

    • Спасибо очень помогли

    По всей видимости это табы. Без JS никак, если вам нужно обрабатывать клик. Можно через css, если, например вас устроит событие hover

    • Спасибо вам за новую фишку (табы), честно сказать за 2 месяца обучения первый раз только услышал что такое есть.Сейчас зашел посмотрел как это реализовать, в принципе меня бы это вполне устроило.
      Просто не хотелось бы сильно заморачиваться со скриптами всего лишь для контента с одними только фотками, ладно если бы там был бы список товаров (с ценой характеристикой номенклатурой итд) и большой массив то еще можно было б а в таком случае я думаю ваш совет мне даже очень подойдет.
    • Почему без JS никак? Табы можно и на чистом CSS реализовать без проблем

    Тут пишут про табы и про то, что их почему-то невозможно сделать без js...
    Но на деле то, что у вас на скрине - это скорее всего галерея с isotope-фильтром.
    Не лучшее решение такое реализовывать табами, но можно сделать и так, и при этом на чистом CSS.

    • https://codepen.io/webinmind/pen/VwvwEyL

      Спасибо большое нашел что то подобное.

    • idvevoland, да, верно - это и есть isotope, и в данном случае это будет лучшим вариантом, потому что у вас есть таб, который показывает все элементы по клику на "Показать все". И если делать это табами, то у вас каждый блок будет выводиться по 2 раза - 1 раз в основном табе "Показать все", и один раз в табе своей категории.

    + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Как сделать пагинацию без скрипта?Есть ответ
      • 07.04.2024
      Ответить

      Для создания пагинации без использования скриптов, вы можете использовать HTML и CSS. Вот пример того, как можно создать простую пагинацию на вашем сайте:

      1. Начнем с HTML. Создадим структуру основной страницы с контентом и пагинацией:

       
 
 
  <title>Пример пагинации</title>
 
    .pagination {
      display: inline-block;
    }
    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
    }
    .pagination a.active {
      background-color: #4CAF50;
      color: white;
    }
 
 
 
 
<div class="content">
  <!-- Ваш контент здесь -->
</div>
 
<div class="pagination">
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
</div>

      2. В CSS мы создали стили для пагинации, где каждая ссылка представляет собой отдельный номер страницы. Первая ссылка помечена как активная.

      3. Теперь вам нужно добавить функциональность для переключения между страницами. Для этого вам придется обновлять URL страницы при нажатии на ссылку пагинации. Это можно сделать с помощью параметров запроса в URL.

      4. Например, при переходе на страницу 2, URL будет выглядеть как `http://example.com?page=2`. Вы можете использовать JavaScript для извлечения параметра `page` из URL и отображения соответствующего контента.

      Таким образом, вы можете создать простую пагинацию без использования скриптов, используя только HTML и CSS. Не забудьте адаптировать этот пример под ваш сайт и требования.

    Оставить комментарий