<MyRusakov.ru />

Создание игр на Unreal Engine 5

Создание игр на Unreal Engine 5

Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создаем вкладки на JS (часть 2)

Создаем вкладки на JS (часть 2)

Во избежание ошибок в работе скрипта, убедимся, что DOM-дерево построено. Для этого повесим, обработчик на событие окна браузера, DOMContentLoaded. После построения DOM-структуры документа (теги), начнет работу callback функция.

window.addEventListener('DOMContentLoaded', function() {
    //...код скрипта создания табов
});

Программируем вкладки на JS

В первой части урока мы создали HTML структуру и задали внешнее оформление табам. Теперь переходим непосредственно к программированию. У нас есть табы с контентом, ссылки-заголовки для табов и их родитель. Давайте получим эти элементы из документа и поместим их в переменные. Родителя мы получим методом querySelector, поскольку он один на странице. Вкладки и ссылки находятся не в единственном числе, поэтому получим их через метод querySelectorAll.

let tab = document.querySelectorAll('.header-tab'),
    header = document.querySelector('.header'),
    tabContent = document.querySelectorAll('.tabcontent');

Нам нужно скрыть на странице все вкладки с контентом, кроме одной первой. При переключении между вкладками, одни табы должны скрываться, а другие показываться. В CSS мы создали два специальных класса hide (display: none) и show (display: flex). Напишем функцию, которая скроет все вкладки на странице. Функция будет принимать один технический аргумент (x). В настройках условия цикла, присвоим аргумент (x) переменной итератору (i). Тело функции выполняется, пока верно условие - (i) меньше длины табов. Таким образом, все вкладки скроются со страницы.

function hideTabContent(x) {
  for (let i = x; i < tabContent.length; i++) {
    tabContent[i].classList.remove('show');
    tabContent[i].classList.add('hide');
  }
}

hideTabContent(1);

Однако, самый первый таб нам нужно оставить видимым. Для этого вызовем функцию и передадим ей 1. Единица подставиться вместо (x), а наш цикл начнет свой отсчет не с нуля, а с единицы. А это значит, что классы show / hide не будут применяться к первому табу с нулевым индексом (отсчет в программировании начинается с нуля). При загрузке страницы, первая вкладка всегда будет оставаться раскрытой, поскольку цикл по ней не пройдет.

Функция hideTabContent() надежно запрятала все табы, кроме первого. А теперь напишем новую функцию "антагонист", показывающую вкладки. В аргументах передадим технический параметр (y), чуть позже он нам понадобится при вызове функции. Прописываем условие, если определенная вкладка содержит класс hide (спрятана), то класс hide удаляется и класс show добавляется к ней. Параметр (y) определяет, какую именно вкладку открыть.

function showTabContent(y) {
  if (tabContent[y].classList.contains('hide')) {
    tabContent[y].classList.remove('hide');
    tabContent[y].classList.add('show');
  }
}

Переходим к последней части JS кода, где обработчик события зафиксирует, по какой вкладке был сделан клик и после этого запустится callback функция с циклом и условиями. С помощью цикла узнаем, на какую ссылку нажал пользователь и покажем ему соответствующий tabcontent. Но давайте обо всем по порядку.

Привяжем, обработчик события к родителю ссылок-табов (делегирование событий), в аргументах функции передадим объект event. В переменную target поместим цель объекта - event.target. В условии проверяем, что пользователь действительно кликнул по родителю ссылок, то есть целью объекта клика, стал header-tab, то запускается цикл for с определенным набором действий. Что это за действия?

Нам нужно установить связь между ссылкой-табом и самим табом. Если происходит клик по второй ссылке, то и показываться должен второй таб. Для этого переберем в цикле все вкладки в цикле (tab) и сравним с ссылками (target), куда мы кликнули. Если они совпадают, то мы скроем все вкладки, запустив функцию hideTabContent, а покажем только одну вкладку, совпадающую по номеру в счетчике (i).

header.addEventListener('click', function(event) {
  let target = event.target;
  if (target && target.classList.contains('header-tab')) {
    for(let i = 0; i < tab.length; i++) {
      if (target == tab[i]) {
        hideTabContent(0);
        showTabContent(i);
        break;
      }
    }
  }
});

Демонстрация работы вкладок на JS

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

alexmind alexmind 11.11.2020 11:27:34

Добрый день! Как при щелчке на вкладку подсвечивать вкладку цветом?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.