Как с помощью 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 находились в одном блоке

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

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 4 часа назад
- 31 просмотр
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 13 часов назад
- 72 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 16 часов назад
- 84 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 20 часов назад
- 80 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 71 просмотр
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Поправить сайт (мобильная версия) на WordPress

24 нояб. 2024, в 04:16

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

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

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

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

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

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 заставить блок появиться?

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

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

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