0

Всем привет! Нужна помощь. введите сюда описание изображения

Как сделать так, чтобы при нажатии на кнопку "rus" черный стиль переходил на эту же кнопку, а на "ua" был возвращен начальный, то есть начальный "rus"?

1
  • Что вы уже сделали и что именно не можете сделать? 23 дек 2018 в 18:04

2 ответа 2

1

Исходя из меток - HTML+CSS:

#language {
  display: none;
}

#language+label {
  display: block;
  width: 5.6em;
  height: 1.5em;
  border: 3px solid #000;
  font: bold 20pt/1.5em 'Arial';
  text-shadow: 0 0 4px black;
  text-align: center;
  color: #fff;
  background-color: #fff;
  background-image: linear-gradient(#0057b8 50%, #ffd700 50%), linear-gradient(transparent 0%, transparent 100%), linear-gradient(#ffffff 33%, #0039A6 34%, #0039A6 66%, #D52B1E 67%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 50% 0, 200% 0;
  transition: background-position .5s ease;
}

#language:checked+label {
  background-position: -100% 0, 0 0, 100% 0;
}
<input type="checkbox" id="language">
<label for="language">UA&nbsp;&nbsp;&nbsp;&nbsp;RU</label>

2
  • прикольно, мне понравилось (+) 24 дек 2018 в 11:25
  • @Alexandr_TT на сам код, ушло десять минут. Дольше искал утверждённые цвета флагов))
    – UModeL
    24 дек 2018 в 11:28
0

Т.к. вы не выложили полноценный код буду показывать на примере списка: При клике на элемент мы убираем у всех li класс active, а на который кликнули - добавляем, стили для класса active вы можете добавить в вашем файле css/scss, думаю, разберетесь, здесь нет ничего сложного.

В следующий раз пишите развернутый вопрос.

jQuery

$(document).ready(function() {
  $('.language li').on('click', function() {
    $('.language li').removeClass('active');
    $(this).addClass('active');
  })
});

HTML

<ul class="language">
  <li class="active">en</li>
  <li>rus</li>
</ul>

Скромный SCSS:

ul {
  li {
    background: green;
    margin-bottom: 10px;
    &.active {
      background: red;
    }
  }
}

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.