Переключатель кнопки

#javascript #html #css #веб_программирование

Изначально положение переключателя на ссылке Individual.При нажатии белая область
вокруг Individual должна плавно переместиться на ссылку Company и та должна перейти
в активное состояние.Я пытался сделать это с помощью псевдоклассов и transition,но
не вышло.Подскажите,пожалуйста,решение.



.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);
}

  Individual
  Company




    

Ответы

Ответ 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;
}

  Individual
  Company
  



Проверить