enter image description here

Initially, the position of the switch on the Individual link. When pressed, the white area around Individual should smoothly move to the Company link and it should go to the active state. I tried to do this with the help of pseudo-classes and transition, but it did not work out. Tell me, please, the solution.

.status-text { display: block; margin-bottom: 100px; } .status-buttons { display: inline; padding: 17px 2px; border: 1px solid #a2a3a5; border-radius: 30px; } .status-buttons a { text-decoration: none; color: #a2a3a5; padding: 14px 28px; } .status-buttons a:active { background: #fff; border-radius: 30px; color: #000; box-shadow: 0 20px 100px rgba(0, 0, 0, 0.4); } 
 <div class="status-buttons"> <a href="#">Individual</a> <a href="#">Company</a> </div>

  • give the code that you have. - MedvedevDev
  • @MedvedevDev added - Egor

1 answer 1

 // Получаем все нужные элементы var parent = document.querySelector('.buttons'), buttons = parent.querySelectorAll('.button'), active = parent.querySelector('.active'); // Создаём функцию для переключения фокуса var setActive = function(element) { // Получаем ширину и положение слева ссылки var newLeft = element.getBoundingClientRect().left - parent.getBoundingClientRect().left, // Отнимает положение слева ссылки от положения слева родителя newWidth = element.getBoundingClientRect().width; // Получаем полную ширину ссылки // Применяем ширину и тступ слева для фокуса active.style['left'] = newLeft + 'px'; active.style['width'] = newWidth + 'px'; // Переключаем класс "is-active" на нужную нам ссылку Array.prototype.forEach.call(buttons, function(button) { // Промеряем, не является ли элемент нужной нам ссылкой if (button !== element) button.classList.remove('is-active'); // Если нет, то удаляем у него класс else button.classList.add('is-active'); // Если да, то добавляем ему класс }); // Как дополнительная функция, добавляем значение выделенной ссылке к общему переключателю parent.dataset.value = element.dataset.name || null; }; // Перебираем все ссылки Array.prototype.forEach.call(buttons, function(button) { // Изначально присваиваем фокусу нужные там размеры if (button.classList.contains('is-active')) setActive(button); // Добавляем событие нажатия на ссылку button.addEventListener('click', function (e) { e.preventDefault(); // Отключаем все стандартные действия при нажатии // Если элемент уже не активен, то добавляем к нему фокус if (!this.classList.contains('is-active')) setActive(this); }); }); // Теперь мы можем получить у переключателя значение, которое установлено в выбранной ссылке document.querySelector('#link').onclick = function (e) { e.preventDefault(); console.log( parent.dataset.value ); }; 
 .buttons { display: inline-block; position: relative; padding: 17px 2px; border: 1px solid #a2a3a5; border-radius: 30px; } .button { text-decoration: none; color: #a2a3a5; padding: 14px 28px; /* Плавно меняем цвет текста */ transition: color 0.3s; } .button.is-active { color: #000; } .active { position: absolute; top: 3px; height: 45px; background: #fff; border-radius: 30px; color: #000; box-shadow: 0 20px 100px rgba(0, 0, 0, 0.4); z-index: -1; /* Плавно меняем ширину и отступ слева у выделения */ transition: all 0.5s; } 
 <div class="buttons"> <a class="button is-active" href="#" data-name="0">Individual</a> <a class="button" href="#" data-name="1">Company</a> <div class="active"></div> </div> <a id="link" href="#">Проверить</a>