Как с помощью css заставить блок появиться?

Question

Foxy9 @Foxy9

HTML
CSS

Как с помощью css заставить блок появиться?

Есть следующий код html

<div class="tabs">
                        <div class="tabs__menu">
                            <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
                            <label for="tab-btn-1">Игровые версии</label>
                            <input type="radio" name="tab-btn" id="tab-btn-2" value="">
                            <label for="tab-btn-2">Собственная таблица лидеров</label>
                            <input type="radio" name="tab-btn" id="tab-btn-3" value="">
                            <label for="tab-btn-3">Профиль пользователя</label>
                            <input type="radio" name="tab-btn" id="tab-btn-4" value="">
                            <label for="tab-btn-4">Рейтинг игр</label>
                        </div>
<div class="radio__content" id="content-1"> ... content1 ... </div>
<div class="radio__content" id="content-2"> ... content2 ... </div>
</div>

Как мне с помощью css заставить блок с классом "content-1" появиться? Пробовал разные виды селекторов, но все они требуют, чтобы и div, и radiobutton находились в одном блоке

Вопрос задан более года назад
80 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Noder SS @noder_ss

В каком смысле появиться?

Написано более года назад
Foxy9 @Foxy9 Автор вопроса

Noder SS, по умолчанию, блок radio__content отключен, у него стоит display: none

Надо сделать так, чтобы при radio checked у блока было свойство display: block

Написано более года назад

Noder SS @noder_ss

так?:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p><input type="radio" name="radio-btn" id="" class="radio radio1">Радио 1</p>
        <p><input type="radio" name="radio-btn" id="" class="radio radio1">Радио 1</p>
        <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p>
        <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p>
        <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p>
        <div class="content1 cont" >content 1</div>
        <div class="content2 cont">content 2</div>
    </div>
</body>
<style>
    .cont{
        display: none;
    }
</style>
<script>
    let cont1 = document.querySelector(".content1")
    let cont2 = document.querySelector(".content2")
let radios1 = Array.from(document.querySelectorAll(".radio1"))
let radios2 = Array.from(document.querySelectorAll(".radio2"))
radios1.forEach(function(r1){
r1.addEventListener("input", function(){
    cont2.style.display = "none"
cont1.style.display = "unset"
})

})
radios2.forEach(function(r2){
    r2.addEventListener("input", function(){
        cont1.style.display = "none"
cont2.style.display = "unset"
})
})
</script>
</html>

Написано более года назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Средний
Как зафиксировать данные блоки, чтобы не было разрывов?
- 1 подписчик
- 11 минут назад
- 13 просмотров
0

ответов
HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 20 часов назад
- 52 просмотра
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 23 часа назад
- 40 просмотров
0

ответов
HTML

Простой
Как выставить фото в select?
- 1 подписчик
- вчера
- 62 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- вчера
- 100 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- вчера
- 63 просмотра
2

ответа
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 26 апр.
- 55 просмотров
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

NodeJS реализации интерации двух сервисов и создания микро системы

28 апр. 2024, в 13:39

11000 руб./за проект

Разработка веб-игры

28 апр. 2024, в 13:37

15000 руб./за проект

Разработка Telegrm-бота с WebApp

28 апр. 2024, в 13:15

80000 руб./за проект

Noder SS, по умолчанию, блок radio__content отключен, у него стоит display: none

Надо сделать так, чтобы при radio checked у блока было свойство display: block
так?:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <p><input type="radio" name="radio-btn" id="" class="radio radio1">Радио 1</p> <p><input type="radio" name="radio-btn" id="" class="radio radio1">Радио 1</p> <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p> <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p> <p><input type="radio" name="radio-btn" id="" class="radio radio2">Радио 2</p> <div class="content1 cont" >content 1</div> <div class="content2 cont">content 2</div> </div> </body> <style> .cont{ display: none; } </style> <script> let cont1 = document.querySelector(".content1") let cont2 = document.querySelector(".content2") let radios1 = Array.from(document.querySelectorAll(".radio1")) let radios2 = Array.from(document.querySelectorAll(".radio2")) radios1.forEach(function(r1){ r1.addEventListener("input", function(){ cont2.style.display = "none" cont1.style.display = "unset" }) }) radios2.forEach(function(r2){ r2.addEventListener("input", function(){ cont1.style.display = "none" cont2.style.display = "unset" }) }) </script> </html>

Answer 1 · 2023-02-14 12:45:54

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

.tabs:has(#tab-btn-1:checked) > #content-1 {
  display: block;
}

PS https://caniuse.com/css-has

Ответ написан более года назад

Комментировать

Как с помощью css заставить блок появиться?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт