Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Study</title>
- <style>
- .book {
- display: flex;
- margin: auto;
- margin-top: 80px;
- align-items: center;
- justify-content: center;
- line-height: 40px;
- font-size: 30px;
- max-width: 50%;
- background-color: #ebe37b;
- }
- li.active {
- background: #b57241;
- }
- </style>
- </head>
- <body>
- <div class="book">
- <ul id="books">
- <li>«Властелин колец» — Джон Р. Р. Толкин</li>
- <li>«Гордость и предубеждение» — Джейн Остин</li>
- <li>«Тёмные начала» — Филип Пулман</li>
- <li>«Автостопом по галактике» — Дуглас Адамс</li>
- <li>«Гарри Поттер и Кубок огня» — Джоан Роулинг</li>
- <li>«Убить пересмешника» — Харпер Ли</li>
- <li>«Винни Пух» — Алан Александр Милн</li>
- <li>«1984» — Джордж Оруэлл</li>
- </ul>
- </div>
- <script>
- 'use strict'
- const books = document.getElementById('books');
- function toggle(event) {
- let active = books.querySelector('.active');
- if (active) { active.classList.remove('active'); }
- event.target.classList.add('active');
- }
- books.addEventListener('click', toggle);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement