Создание списка меток с функцией показа/скрытия на странице

Содержание статьи

Введение

В этой статье мы рассмотрим, как создать интерактивный список меток на веб-странице с помощью HTML, CSS и JavaScript. Наш список будет предоставлять пользователю возможность показывать или скрывать метки по клику на специальную кнопку или ссылку. Это полезный функционал для управления большим количеством меток и улучшения пользовательского опыта.

Шаг 1: Разметка HTML

Начнем с создания основной разметки для списка меток:

<section class="tag-list">
  <h2>Метки</h2>
  <ul class="tag-list__list">
    <li class="tag-list__item">Метка 1</li>
    <li class="tag-list__item">Метка 2</li>
    <li class="tag-list__item">Метка 3</li>
    <li class="tag-list__item">Метка 4</li>
    <li class="tag-list__item">Метка 5</li>
    <!-- Еще элементы списка для наглядности -->
  </ul>
  <a href="#" id="show-tags-btn">Показать все</a>
</section>

Шаг 2: Стилизация CSS

Добавим стили, чтобы придать нашему списку меток привлекательный вид:

<style>
  .tag-list {
    border: 1px solid #ccc;
    padding: 10px;
  }

  .tag-list__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .tag-list__item {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    margin-bottom: 8px;
  }

  #show-tags-btn {
    display: block;
    margin-top: 10px;
    text-align: center;
    text-decoration: underline;
    color: #007bff;
    cursor: pointer;
  }
</style>

Шаг 3: Добавление функционала показа/скрытия меток:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const showTagsBtn = document.getElementById("show-tags-btn");
    const hiddenTags = document.querySelectorAll(".tag-list__item.hide");

    // Функция для скрытия меток
    function hideTags() {
      hiddenTags.forEach((tag) => tag.classList.add("hide"));
    }

    // Функция для показа меток
    function showTags() {
      hiddenTags.forEach((tag) => tag.classList.remove("hide"));
    }

    // Функция для обновления текста ссылки
    function updateShowTagsBtnText() {
      const areTagsHidden = hiddenTags.length > 0;
      showTagsBtn.textContent = areTagsHidden ? "Показать все" : "Скрыть";
    }

    // Обработчик клика по ссылке "Показать все"
    showTagsBtn.addEventListener("click", function (event) {
      event.preventDefault();
      const areTagsHidden = hiddenTags.length > 0;

      if (areTagsHidden) {
        showTags();
      } else {
        hideTags();
      }

      updateShowTagsBtnText();
    });

    // При загрузке страницы обновляем текст ссылки
    updateShowTagsBtnText();
  });
</script>

Теперь у вас есть функционал, который позволяет показывать и скрывать часть меток на странице по клику на ссылку «Показать все». Этот пример демонстрирует, как легко добавить интерактивность на страницу, не затрагивая содержимое разметки. Теперь давайте перейдем к более сложному примеру, где мы будем добавлять метки динамически с помощью JavaScript.

Добавление меток программно с помощью JavaScript

Теперь добавим JavaScript-код для создания динамических меток и добавления их в список:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tagList = document.querySelector(".tag-list__list");

    // Массив с метками (предположим, что это данные с сервера)
    const tags = ["Метка 1", "Метка 2", "Метка 3", "Метка 4", "Метка 5", "Метка 6", "Метка 7", "Метка 8", "Метка 9", "Метка 10"];

    // Функция для создания элемента метки и добавления в список
    function createTagElement(tag) {
      const tagItem = document.createElement("li");
      tagItem.classList.add("tag-list__item");
      tagItem.textContent = tag;
      tagList.appendChild(tagItem);
    }

    // Добавление всех меток в список
    tags.forEach((tag) => createTagElement(tag));
  });
</script>

Шаг 4: Добавление функционала показа/скрытия меток

Добавим функционал показа/скрытия меток с помощью JavaScript:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tagList = document.querySelector(".tag-list__list");
    const showTagsBtn = document.getElementById("show-tags-btn");
    const tags = ["Метка 1", "Метка 2", "Метка 3", "Метка 4", "Метка 5", "Метка 6", "Метка 7", "Метка 8", "Метка 9", "Метка 10"];
    const MAX_VISIBLE_TAGS = 5;

    // Функция для скрытия меток после определенного числа
    function hideExtraTags() {
      const tagItems = tagList.querySelectorAll(".tag-list__item");
      for (let i = MAX_VISIBLE_TAGS; i < tagItems.length; i++) {
        tagItems[i].classList.add("hide");
      }
    }

    // Функция для отображения всех меток
    function showAllTags() {
      const tagItems = tagList.querySelectorAll(".tag-list__item");
      tagItems.forEach((tag) => tag.classList.remove("hide"));
    }

    // Функция для обновления текста ссылки
    function updateShowTagsBtnText() {
      const areTagsHidden = tagList.querySelectorAll(".tag-list__item.hide").length > 0;
      showTagsBtn.textContent = areTagsHidden ? "Показать все" : "Скрыть";
    }

    // Обработчик клика по ссылке "Показать все"
    showTagsBtn.addEventListener("click", function (event) {
      event.preventDefault();
      const areTagsHidden = tagList.querySelectorAll(".tag-list__item.hide").length > 0;

      if (areTagsHidden) {
        showAllTags();
      } else {
        hideExtraTags();
      }

      updateShowTagsBtnText();
    });

    // При загрузке страницы выполняем скрытие лишних меток и обновляем текст ссылки
    hideExtraTags();
    updateShowTagsBtnText();
  });
</script>

Промежуточный итог

Поздравляю! Вы успешно создали список меток с интересным функционалом показа/скрытия на вашей веб-странице. Теперь пользователи смогут видеть только те метки, которые действительно интересны для них. Дополните функционал списка меток, добавив фильтрацию по категориям или поисковую функцию, чтобы сделать его еще более удобным и функциональным. Надеюсь, эта статья поможет вам улучшить взаимодействие пользователей с вашим веб-сайтом и повысить удовлетворенность пользователей вашим контентом. Удачи вам в веб-разработке и программировании!

Теперь поработаем с данными из из JSON-файла

Давайте доработаем наш код, чтобы он работал с данными из JSON-файла. Вместо жестко закодированного массива меток, мы будем загружать метки из JSON и динамически добавлять их в список.

Для этого создадим JSON-файл с метками, например, с именем tags.json. В этом файле будут данные о метках в формате JSON:

[
  "Метка 1",
  "Метка 2",
  "Метка 3",
  "Метка 4",
  "Метка 5",
  "Метка 6",
  "Метка 7",
  "Метка 8",
  "Метка 9",
  "Метка 10",
  "Метка 11",
  "Метка 12",
  "Метка 13",
  "Метка 14",
  "Метка 15"
]

Теперь изменим JavaScript-код для загрузки меток из этого JSON-файла:

<section class="tag-list">
  <h2>Метки</h2>
  <ul class="tag-list__list"></ul>
  <a href="#" id="show-tags-btn">Показать все</a>
</section>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tagList = document.querySelector(".tag-list__list");
    const showTagsBtn = document.getElementById("show-tags-btn");
    const MAX_VISIBLE_TAGS = 5;

    // Функция для загрузки данных из JSON
    async function loadTagsFromJSON() {
      try {
        const response = await fetch("tags.json");
        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Ошибка загрузки данных:", error);
        return [];
      }
    }

    // Функция для создания элемента метки и добавления в список
    function createTagElement(tag) {
      const tagItem = document.createElement("li");
      tagItem.classList.add("tag-list__item");
      tagItem.textContent = tag;
      tagList.appendChild(tagItem);
    }

    // Функция для скрытия меток после определенного числа
    function hideExtraTags() {
      const tagItems = tagList.querySelectorAll(".tag-list__item");
      for (let i = MAX_VISIBLE_TAGS; i < tagItems.length; i++) {
        tagItems[i].classList.add("hide");
      }
    }

    // Функция для отображения всех меток
    function showAllTags() {
      const tagItems = tagList.querySelectorAll(".tag-list__item");
      tagItems.forEach((tag) => tag.classList.remove("hide"));
    }

    // Функция для обновления текста ссылки
    function updateShowTagsBtnText() {
      const areTagsHidden = tagList.querySelectorAll(".tag-list__item.hide").length > 0;
      showTagsBtn.textContent = areTagsHidden ? "Показать все" : "Скрыть";
    }

    // Обработчик клика по ссылке "Показать все"
    showTagsBtn.addEventListener("click", function (event) {
      event.preventDefault();
      const areTagsHidden = tagList.querySelectorAll(".tag-list__item.hide").length > 0;

      if (areTagsHidden) {
        showAllTags();
      } else {
        hideExtraTags();
      }

      updateShowTagsBtnText();
    });

    // Загрузка меток из JSON и добавление их в список
    loadTagsFromJSON().then((tags) => {
      tags.forEach((tag) => createTagElement(tag));
      hideExtraTags();
      updateShowTagsBtnText();
    });
  });
</script>

Теперь наш код будет динамически загружать метки из JSON-файла и создавать элементы списка меток на основе этих данных. Это сделает нашу реализацию более гибкой и удобной в управлении данными о метках.

Итог разобранного кейса

В этой статье мы рассмотрели примеры создания списка меток с функцией показа и скрытия на веб-странице с использованием HTML, CSS и JavaScript. Начиная с более простого примера, где метки уже присутствуют в разметке, мы добавили функционал для управления их видимостью.

Затем мы перешли к более сложному примеру, где метки были добавлены динамически с помощью JavaScript. Этот функционал особенно полезен, когда у вас есть большое количество меток или когда вы хотите предоставить пользователям возможность фильтровать информацию, отображая только необходимые метки.

Применение в реальных проектах:

Этот функционал может быть полезен в различных сценариях, таких как:

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

Советы для начинающих веб-разработчиков:

Начинайте с простого: Начинающим веб-разработчикам рекомендуется начать с простых проектов и функционала, чтобы постепенно освоить основы языков программирования, разметки и стилей.
Используйте библиотеки и фреймворки: Использование готовых библиотек и фреймворков упрощает разработку, ускоряет процесс и облегчает поддержку проекта.
Учитесь открыто: Веб-разработка постоянно меняется и развивается. Постоянно изучайте новые технологии и лучшие практики, чтобы оставаться в курсе последних тенденций.
Тестируйте код: Проверяйте свой код на ошибки и тестируйте его на различных устройствах и браузерах, чтобы обеспечить кросс-браузерную совместимость.
Код рефакторинг: После завершения проекта периодически проводите рефакторинг кода, чтобы улучшить его читаемость, эффективность и сопровождаемость.
Используйте версионирование: Используйте системы контроля версий, такие как Git, чтобы отслеживать изменения в коде и возвращаться к предыдущим версиям при необходимости.
Сотрудничайте и общайтесь: Участвуйте в сообществе веб-разработчиков, общайтесь с опытными разработчиками, задавайте вопросы и делитесь своим опытом.

Завершение:

Мы надеемся, что этот гид поможет вам легко создавать списки меток с функцией показа и скрытия, а также позволит вам лучше понять основы HTML, CSS и JavaScript. Это только начало вашего пути в веб-разработке, и с практикой и дальнейшим изучением вы достигнете новых высот в своих проектах. Никогда не бойтесь экспериментировать, изучать новые инструменты и искать творческие подходы к решению задач. Удачи!

Создание списка меток с функцией показа/скрытия на странице с помощью HTML, CSS и JavaScript