3

Как сделать переключение текста с помощью радиокнопок на css, как на примеревведите сюда описание изображения

Или нужно будет подклюать JS?

0

2 ответа 2

5

В самом общем виде как-то так:

p {
  display: none;
}
#one:checked ~ #text1,
#two:checked ~ #text2,
#three:checked ~ #text3{
  display: block;
}
<input type="radio" name="radio" id="one" />
<input type="radio" name="radio" id="two" />
<input type="radio" name="radio" id="three" />

<p id="text1">Текст 1</p>
<p id="text2">Текст 2</p>
<p id="text3">Текст 3</p>

4

input {
  float: left;
  clear: left;
  margin-right: 1em;
}

div {
  overflow: hidden;
  display: none;
}

:checked + * + * + * {
  display: block;
}
<input type="radio" name="r" checked />
<input type="radio" name="r" />
<input type="radio" name="r" />

<div>Переключение текста с помощью радиокнопок</div>
<div>Как сделать переключение текста с помощью радиокнопок на css, как на примере Как сделать переключение текста с помощью радиокнопок на css, как на примере Как сделать переключение текста с помощью радиокнопок на css, как на примере Как сделать переключение текста с помощью радиокнопок на css, как на примере</div>
<div>Или нужно будет подклюать JS?</div>

3
  • Почему при нажатии на радиокнопки новый текст добавляется, но старый не пропадает? Commented 11 дек. 2019 в 20:58
  • @Knurl360259, вероятно, ты забыл им одинаковый name задать.
    – Qwertiy
    Commented 11 дек. 2019 в 21:37
  • Да так и есть действительно забыл Commented 12 дек. 2019 в 16:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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