Переключатель в HTML

159
15 августа 2018, 16:30

Помогите, пожалуйста. Как сделать чтобы при нажатии на кнопку "Для мужчин" поменять изображение, а также в будущем изменять другие элементы? На данный момент пытаюсь сделать так:

<input type="radio" name="button" id="button1" checked="checked" value="woman">
<label for="button1">ДЛЯ ЖЕНЩИН</label>
<input type="radio" name="button" id="button2" value="man">
<label for="button2">ДЛЯ МУЖЧИН</label>

но ничего не получается :( получается только менять цвет кнопок. Заранее спасибо

Answer 1

Например:

img { 
  display: none; 
  max-width: 100%; 
} 
 
label { 
  display: inline-block; 
  border:1px solid #000; 
  padding: 5px 10px; 
  margin: 5px; 
} 
 
input[type="radio"] { 
  display: none; 
} 
 
#man:checked~#label-man { 
  border-color: red; 
} 
 
#woman:checked~#label-woman { 
  border-color: red; 
} 
 
#man:checked~#img-man { 
  display: block; 
} 
 
#woman:checked~#img-woman { 
  display: block; 
}
  <input type="radio" name="man" id="man" checked> 
  <input type="radio" name="man" id="woman"> 
   
  <label for="man" id="label-man">Man</label> 
  <label for="woman" id="label-woman">Woman</label> 
   
  <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eefa9be00575de989c32ab5dbe1315a9&auto=format&fit=crop&w=600&q=60" alt="" id="img-man"> 
  <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a3fa46375259c39d07d0227e8ade6daa&auto=format&fit=crop&w=600&q=60" alt="" id="img-woman"> 
  

READ ALSO
Вывод сообщений в шахматном порядке

Вывод сообщений в шахматном порядке

Нужно сделать примерно такую форму записи:

135
Узнать &ldquo;вчерашний день&rdquo;

Узнать “вчерашний день”

Допустим есть дата 3004

177
В консоли работает на сайте нет

В консоли работает на сайте нет

В консоли это работает, а на сайте нет:

135