Кекстаграм: Эпилог. JavaScript / Кекстаграм: репетируем переключение [3/27]
×

Кекстаграм: репетируем переключение [3/27]

Отлично, у нас есть первый фильтр и первый переключатель.

Давайте добавим заготовку для ещё одного переключателя. Класс для второго фильтра будет называться toaster.

Затем «отрепетируем» переключение фильтра без использования JavaScript. Для этого пока будем менять HTML-код вручную. При переключении фильтра происходит два события:

Первое. В переключателе класс active перемещается на текущий фильтр:

Было:
<ul class="toggle-controls">
    <li class="filter1 active"></li>
    <li class="filter2"></li>
</ul>

Стало:
<ul class="toggle-controls">
    <li class="filter1"></li>
    <li class="filter2 active"></li>
</ul>

Второе. У блока с большим фото меняется класс текущего фильтра:

Было:  <div class="photo filter1"></div>
Стало: <div class="photo filter2"></div>

Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кекстаграм: репетируем переключение</title> <base href="/assets/course98/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="keksta"> <div class="photos"> <div class="photo walden"></div> </div> <ul class="toggle-controls"> <li class="walden active">walden</li> </ul> <script src="script.js"></script> </body> </html>
.photo { background-image: url("img/spb-4.jpg"); } .walden { filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4); }
HTML Academy
  1. В список .toggle-controls добавьте второй пункт с текстом toaster и с классом toaster.
  2. Затем удалите класс active у первого пункта в списке и добавьте его второму.
  3. У большой фотографии замените класс walden на toaster.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.