Создание шаблона пагинации на 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');
});
});
});
Объяснение кода
-
HTML: Мы создаем основную структуру HTML документа, включая контейнер для пагинации.
-
CSS: Мы добавляем стили для пагинации, определяя внешний вид ссылок на страницы и их состояния (активная/неактивная).
-
JavaScript: Мы используем JavaScript для добавления функциональности пагинации. Код обрабатывает клики по ссылкам пагинации, удаляя класс «active» со всех ссылок и добавляя его только к той, по которой был сделан клик. Подробнее о динамической стилизации рассказано в видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0
Этот пример демонстрирует простой способ создания и управления пагинацией на веб-странице с использованием основных технологий веб-разработки.
