Помогите, пожалуйста. Как сделать чтобы при нажатии на кнопку "Для мужчин" поменять изображение, а также в будущем изменять другие элементы? На данный момент пытаюсь сделать так:
<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>
но ничего не получается :( получается только менять цвет кнопок. Заранее спасибо
Например:
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">
Фрилансер или Digital-агентство - Как сделать правильный выбор?
https://jsfiddlenet/Nata_Hamster/L8r0yk5x/