Создание шаблона пагинации на HTML, CSS и JavaScript

Создание шаблона пагинации на HTML, CSS и JavaScript

Создание шаблона пагинации на HTML, CSS и JavaScript

Как известно пагинация — это важный аспект веб-разработки, который позволяет управлять и представлять большие объемы контента в более удобной форме для пользователей. В этой статье мы рассмотрим, как создать простую пагинацию на HTML, CSS и JavaScript, используя пример из кода.

HTML: Структура пагинации



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pagination Example</title>

    <style>

        /* Стили пагинации */

    </style>

</head>

<body>



<div class="pagination">

    <!-- Ссылки на страницы -->

</div>



<script>

    // JavaScript для обработки кликов по ссылкам пагинации

</script>



</body>

</html>

CSS: Стилизация пагинации



.pagination {

    display: inline-block;

}



.pagination a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

    border: 1px solid #ddd;

}



.pagination a.active {

    background-color: #4CAF50;

    color: white;

    border: 1px solid #4CAF50;

}



.pagination a:hover:not(.active) {

    background-color: #4CAF50;

    color: white;

}



JavaScript: Обработка кликов по ссылкам пагинации

document.addEventListener("DOMContentLoaded", function() {

    var paginationLinks = document.querySelectorAll('.pagination a');



    paginationLinks.forEach(function(link) {

        link.addEventListener('click', function(event) {

            event.preventDefault();

            paginationLinks.forEach(function(innerLink) {

                innerLink.classList.remove('active');

            });

            this.classList.add('active');

        });

    });

});



Объяснение кода

  1. HTML: Мы создаем основную структуру HTML документа, включая контейнер для пагинации.

  2. CSS: Мы добавляем стили для пагинации, определяя внешний вид ссылок на страницы и их состояния (активная/неактивная).

  3. JavaScript: Мы используем JavaScript для добавления функциональности пагинации. Код обрабатывает клики по ссылкам пагинации, удаляя класс «active» со всех ссылок и добавляя его только к той, по которой был сделан клик. Подробнее о динамической стилизации рассказано в видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0

Этот пример демонстрирует простой способ создания и управления пагинацией на веб-странице с использованием основных технологий веб-разработки.

Источник

НЕТ КОММЕНТАРИЕВ

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