Две кнопки и переходящий цвет [закрыт]

165
03 июля 2019, 05:10

Всем привет! Нужна помощь.

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

Answer 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>

Answer 2

Т.к. вы не выложили полноценный код буду показывать на примере списка: При клике на элемент мы убираем у всех 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;
    }
  }
}
READ ALSO
Роль атрибута for в данном примере
HTML

Роль атрибута for в данном примере

В моей книге был приведён следующий пример:

 150
Ошибка в FireFox
HTML

Ошибка в FireFox

данный кусок кода выдает ошибку в firefox, хотелось бы понять в чем проблема ошибка ReferenceError: event is not defined Весь код находится тут

 139
Не работает плавное перемещение к якорю на Jquery
jQuery

Не работает плавное перемещение к якорю на Jquery

К примеру, у меня есть ссылка:

 153
скрыть checked элементы по нажатию на кнопку в jquery
jQuery

скрыть checked элементы по нажатию на кнопку в jquery

Есть todoлист который добавляет элементы с чекбоксамиНужно написать кнопку при нажатии которой checked задачи скрываются

 176