Как сделать подобное меню выбора элементов

@LiteEn · Регистрация: 02.02.2019

Студворк — интернет-сервис помощи студентам

Привет всем!)
Сижу уже не первый час и пытаюсь понять, как же всё-таки сделать подобный выбор элементов (на картинке есть пример), чтобы при нажатии на кружок он подсвечивался, и выбранный элемент (в моем случае 1 из прямоугольников с текстом) стал больше.

Буду очень благодарен, если подскажите.

@DrType · 28.09.2022, 23:33

Приветствую, а HTML-разметка у вас уже есть? Чтобы от неё отталкиваться.

@LiteEn · 28.09.2022, 23:52 **[ТС]**

Приветствую!
Да, есть. Скину полным архивом, ибо там присутствует CSS + немного картинок, чтобы нагляднее было.

@DrType · 29.09.2022, 00:35

В HTML добавим блок меню:

HTML5
1
<div class="circles"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.addEventListener("DOMContentLoaded", function () {
  const rectangles = document.querySelectorAll(".rectangles .rectangle1"),
    menu = document.querySelector(".circles");
  rectangles.forEach((r, i) => {
    const point = document.createElement("div");
    point.classList.add("circle");
    if (!i) {
      point.classList.add("active_point");
    }
    point.dataset.block = i;
    menu.append(point);
  });
  menu.addEventListener("click", function (e) {
    const point = e.target.closest(".circle");
    if (!point) {
      return;
    }
    for (let menu_point of menu.querySelectorAll(".circle")) {
      menu_point.classList.toggle("active_point", menu_point == point);
    }
    rectangles.forEach((r, i) => {
      r.classList.toggle("active", i == point.dataset.block);
    });
  });
});

Примерные стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.circles {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}
.circle {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 0 1em;
  background: gray;
  cursor: pointer;
}
.active {
  scale: 1.1;
}
.active_point {
  background: #fbad27;
}

@LiteEn · 29.09.2022, 00:45 **[ТС]**

Спасибо большое!

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@LiteEn 0 / 0 / 0 Регистрация: 02.02.2019 Сообщений: 4

	Как сделать подобное меню выбора элементов 28.09.2022, 23:31. Показов 622. Ответов 4 Метки html css, javascript (Все метки) Привет всем!) Сижу уже не первый час и пытаюсь понять, как же всё-таки сделать подобный выбор элементов (на картинке есть пример), чтобы при нажатии на кружок он подсвечивался, и выбранный элемент (в моем случае 1 из прямоугольников с текстом) стал больше. Буду очень благодарен, если подскажите. Миниатюры 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	28.09.2022, 23:33
	Приветствую, а HTML-разметка у вас уже есть? Чтобы от неё отталкиваться. 0

@LiteEn 0 / 0 / 0 Регистрация: 02.02.2019 Сообщений: 4
	29.09.2022, 00:45 [ТС]
	Спасибо большое! 0

Как сделать подобное меню выбора элементов

Решение