<MyRusakov.ru />

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

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

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

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Показать и скрыть элемент на JS

Показать и скрыть элемент на JS

На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.


HTML структура

В HTML разметке присутствует кнопка, имеющая начальное положение "Показать элемент" и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.

<button class="btn" type="button">
    Показать элемент
</button>
<div class="content hidden">
Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.
</div>

CSS код

Разукрасим нашу кнопку линейным градиентом и установим легкую тень.

.btn{
    text-decoration: none;
    text-align: center;
    width: 250px;
    padding: 20px 0;
    border: solid 1px #004F72;
    border-radius: 4px;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #E5FFFF;
    background-color: #3BA4C7;
    background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    outline: none;
}

.content {
    margin-top: 20px;
    padding: 20px;
    border: solid 1px rgb(214, 218, 219);
    border-radius: 4px;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.hidden {
    display: none; // скрывает текст
}

JavaScript код

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

Создадим две переменные, которым присвоим кнопку и блок по названиям селекторов. Затем будем отлавливаем событие клика по кнопке с помощью обработчика событий addEventListener. Первым параметром мы передаем событие клика, а вторым параметром название функции btnClick, в которой описываем действия, которые должны произойти после клика по кнопке. Первым делом необходимо найти класс hidden и при помощи метода toggle (переключатель) добавлять класс hidden, если его нет и удалять, если он есть. Кроме того на кнопке должны меняться надписи "Показать элемент / Скрыть элемент". Для этого обратимся к свойству кнопки textContent и создадим условие if-else. Если в блоке с классом content содержится и класс hidden, то поменять на кнопке надпись на "Скрыть элемент". В противном случае оставить, как было "Показать элемент".

const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener("click", btnClick);

function btnClick() {
    console.log(content.classList);

    if (content.classList.contains("hidden")) {
        btn.textContent = "Скрыть элемент";
    } else {
        btn.textContent = "Показать элемент";
    }

    content.classList.toggle("hidden");
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

master284 master284 17.04.2020 16:31:24

Замечательная технология показа текста, если интересуют подробности посетителя. Кроме того, возможно и картинки так вставлять в эти тексты. Вот вопрос, а не мешает это поисковому роботу производить индексацию? И если есть в тексте ссылки, как осуществляется переход на них? Спасибо за предоставленную возможность задавать вопросы.

Ответить

porsake porsake 17.04.2020 20:17:52

Скрытый текст от глаз пользователя, прекрасно виден роботам, ведь он по факту есть в html разметке, ровно как и ссылки.

Ответить

master284 master284 17.04.2020 20:35:55

Спасибо. А если на странице есть якорная ссылка и надо перейти на текст в этом спойлере? Как происходит визуально этот переход?

Ответить

porsake porsake 17.04.2020 22:53:44

без дополнения текущего JavaScript не сработает, надо отслеживать событие клика по ссылке.

Ответить

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