С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/75: Рейтинг темы: голосов - 75, средняя оценка - 4.87
0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
1

Переключение стилей при нажатии через css, без javascript

28.10.2018, 13:48. Показов 14993. Ответов 14

Author24 — интернет-сервис помощи студентам
Необходимо реализовать смену стилей при выборе элемента input type="radio" c id="list"
Есть html-ка там в блоке article много однотипных section'ов, со свойством display: inline-block;
Надо, чтобы при выборе пользователем через радио-элемент другого стиля отображения стиль менялся (блоки начинали отображаться в по одному в столбик друг за другом, размер блоков менялся и еще некоторые незначительные изменения контента.
Моя гипотеза была сделать так:
CSSВыделить код
1
2
3
4
5
6
7
input[id="list_of_cats"]:checked article section
{
    margin: 30px;
    width: 210px;
    border: 1px solid #000;
    display: block;
}
но так не работает, не понимаю почему.
Кнопки размещены в header, контент в article
Радио-кнопки создаю так:
HTML5Выделить код
1
2
3
4
<header>
        <label><input type="radio" name="v" checked>Блоки-карточки</label>
        <label><input type="radio" name="v" id="list_of_cats">Список</label>
    </header>
Буду благодарна за подсказку и объяснения!
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
28.10.2018, 13:48
Ответы с готовыми решениями:

CSS переключение файлов стилей
Здравствуйте. Сделал сайт, но на нем достаточно много анимации, что напрягает процессор так неплохо...

Чем отличается импорт стилей от подключения связанных стилей css?
чем отличается импорт стилей от подключения связанных стилей css? &lt;link rel=&quot;stylesheet&quot;...

Изменение стилей блока при нажатии на кнопку
Столкнулся с проблемой вывода статей. Хочу реализовать таким образом: изначально статьи на странице...

При нажатии кнопки изменение стилей некоторый обьектов
Здравствуйте! Столкнулся я вот с такой проблемой: хочу сделать кнопку, после нажатия которой...

14
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 14:26 2
Цитата Сообщение от Колос Алена Посмотреть сообщение
но так не работает, не понимаю почему.
Потому что такой input[id="list_of_cats"]:checked article section, селектор означает: применить стили к section который находится в article, который является дочерним для input[id="list_of_cats"], когда инпут будет отмечен.
0
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
28.10.2018, 14:32 3
PHP/HTMLВыделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[id="list_of_cats"]:checked ~ article section
        {
            margin: 30px;
            width: 210px;
            border: 1px solid #000;
            display: block;
            background:red
        }
    </style>
</head>
<body>
    <header>
        <label><input type="radio" name="v" checked>Блоки-карточки</label>
        <label>
            <input type="radio" name="v" id="list_of_cats">Список
            <article>
                <section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, sequi, doloribus, voluptates non vitae laboriosam cum optio repellendus inventore id reiciendis ipsum ipsam rerum fuga molestiae ipsa fugiat praesentium officia.
                </section>
            </article>
        </label>
    </header>
</body>
</html>
А как они у Вас расположены?
0
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 14:57 4
Fedor92, тогда уж как-то так:
HTML5Выделить код
1
2
3
4
5
6
7
8
9
10
 <header>
        <label><input type="radio" name="v" checked>Блоки-карточки</label>
   <input type="radio" name="v" id="list_of_cats">    
   <label for="list_of_cats">Список</label>
            <article>
                <section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, sequi, doloribus, voluptates non vitae laboriosam cum optio repellendus inventore id reiciendis ipsum ipsam rerum fuga molestiae ipsa fugiat praesentium officia.
                </section>
            </article>
    </header>
а то label слишком большой получается
0
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
28.10.2018, 15:07 5
Цитата Сообщение от AlexZaw Посмотреть сообщение
а то label слишком большой получается
В данной ситуации лучше label заменить на div...
0
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 15:22 6
Цитата Сообщение от Fedor92 Посмотреть сообщение
В данной ситуации лучше label заменить на div...
Тогда текст кнопок будет на разных строках. Придется загонять обе кнопки в один див, и надпись "Список" все-равно оборачивать в label что-бы она была кликабельной
0
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
28.10.2018, 15:35 7
Цитата Сообщение от AlexZaw Посмотреть сообщение
Придется загонять обе кнопки в один див, и надпись "Список" все-равно оборачивать в label что-бы она была кликабельной
Внимательно посмотрите на вёрстку ТС, кликабельность метки предложили Вы, а не ТС... И я немного не то имел ввиду... Общая обёртка для всех вложенных элементов, input+div - можно с метками...
0
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 16:00 8
Цитата Сообщение от Fedor92 Посмотреть сообщение
Внимательно посмотрите на вёрстку ТС, кликабельность метки предложили Вы, а не ТС...
Как раз у ТС надписи вместе с input и обернуты в label, и следовательно являются ккликабельными.
Цитата Сообщение от Fedor92 Посмотреть сообщение
Общая обёртка для всех вложенных элементов
Не совсем понял, что имеется ввиду. Не могли бы пример набросать?
1
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
28.10.2018, 16:09 9
Цитата Сообщение от AlexZaw Посмотреть сообщение
Как раз у ТС надписи вместе с input и обернуты в label, и следовательно являются ккликабельными.
Точно, малость зарапортовался...

Цитата Сообщение от AlexZaw Посмотреть сообщение
Не совсем понял, что имеется ввиду. Не могли бы пример набросать?
Классические табы на css:
CSSВыделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tabs {
            list-style-type: none;
            padding: 0;
            margin: 0;
            position: relative;
        }
        .tabs:after {
            content: "";
            clear: both;
            display: block;
            height: 240px;
        }
        .tabs li {
            float: left;
        }
        .tabs li > input {
            display: none;
        }
        .tabs li > label {
            display: inline-block;
            border: 1px solid #999;
            border-right-width: 0;
            border-bottom-width: 0;
            height: 30px;
            line-height: 30px;
            padding: 5px 20px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .tabs li:last-child > label {
            border-right-width: 1px;
        }
        .tabs .tab-content {
            display: none;
            position: absolute;
            left: 0;
            padding: 20px;
            border: 1px solid #999;
            height: 200px;
            overflow-y: auto;
        }
         
        /* Функциональность: */
         
        .tabs li > input:checked + label {
            background-color: #999;
        }
        .tabs li > input:checked ~ .tab-content {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab-1" checked>
        <label for="tab-1">First</label>
        <div class="tab-content">
            1. Cегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab-2">
        <label for="tab-2">Second</label>
        <div class="tab-content">
            2. Cегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab-3">
        <label for="tab-3">Third</label>
        <div class="tab-content">
            3. Cегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. И это не обман, вам действительно не нужны средства для того чтобы создать себе любого вида сайт.  
            Такая возможность имеется благодаря конструктору uCoz. Все что необходимо это пройти регистрацию на странице создания сайтов.
        </div>
    </li>
</ul>
</body>
</html>
В данном случае родителем является тег li, но его можно заменить на div со свойством inline-block + общий родительский блок для всех табов вместо тега ul...
1
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 16:40 10
Цитата Сообщение от Fedor92 Посмотреть сообщение
Классические табы на css:
Табы, на мой взгляд, это не то, что нужно в данном случае. Насколько я понял, ТС хочет изменить отображение блоков из строки в столбик. Т.е. как-бы повели себя карточки товаров в магазине при адаптации. Но пока ТС молчит и не предоставляет полный код, мы можем до посинения гадать и придумывать различные варианты
0
Эксперт HTML/CSS
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
28.10.2018, 16:43 11
Цитата Сообщение от AlexZaw Посмотреть сообщение
Табы, на мой взгляд, это не то, что нужно в данном случае
Увидим, я просто структурно показал расположение блоков в вёрстке на примере табов... На checked можно привязать изменение стилей или даже сублимировать табы и начальную задачу...
0
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 16:59 12
Цитата Сообщение от Fedor92 Посмотреть сообщение
Увидим
Кстати да, вполне возможно что это то, что нужно Не один раз уже были темы где требовалось одно, а, в итоге, оказывалось совсем другое.

За пример спасибо, как то в голову даже не приходило что можно так расставить инпуты. По наивности все время их вначале втыкал не задумываясь
0
0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
28.10.2018, 17:25  [ТС] 13
Цитата Сообщение от AlexZaw Посмотреть сообщение
Насколько я понял, ТС хочет изменить отображение блоков из строки в столбик. Т.е. как-бы повели себя карточки товаров в магазине при адаптации.
Именно это мне и нужно сделать.
Структура моего кода на данный момент следующая:
HTML5Выделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <header>
        <label><input type="radio" name="v" checked>Блоки-карточки</label>
        <label><input type="radio" name="v" id="list">Список</label>
    </header>
    <article>
        <section class="block">
            <img src="#" alt="товар">
            <a class="name" href="#">Шарф вязаный (шерсть)</a> <br>
            <p class="short_info">цена: 1000 руб<br>
                Цвет: тёмно-синий<br>
                Статус: в наличии
            </p>
        </section>
и далее еще много таких же section, после чего просто закрываются теги

Добавлено через 2 минуты
Цитата Сообщение от AlexZaw Посмотреть сообщение
Потому что такой input[id="list_of_cats"]:checked article section, селектор означает: применить стили к section который находится в article, который является дочерним для input[id="list_of_cats"], когда инпут будет отмечен.
Пробовала написать input внутри article, но тоже не получилось заставить работать
0
Модератор
Эксперт HTML/CSS
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
28.10.2018, 18:24 14
Лучший ответ Сообщение было отмечено Колос Алена как решение

Решение

Так?
HTML5Выделить код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <div class="items">
        <label><input type="radio" name="v" checked>Блоки-карточки</label>
        <input type="radio" name="v" id="list_of_cats"><label for="list_of_cats">Список</label>
    <article>
        <section class="block">
            <img src="http://placekitten.com/100" alt="товар">
            <a class="name" href="#">Шарф вязаный (шерсть)</a> <br>
            <p class="short_info">цена: 1000 руб<br>
                Цвет: тёмно-синий<br>
                Статус: в наличии
            </p>
        </section>
        <section class="block">
            <img src="http://placekitten.com/100" alt="товар">
            <a class="name" href="#">Шарф вязаный (шерсть)</a> <br>
            <p class="short_info">цена: 1000 руб<br>
                Цвет: тёмно-синий<br>
                Статус: в наличии
            </p>
        </section>
        <section class="block">
            <img src="http://placekitten.com/100" alt="товар">
            <a class="name" href="#">Шарф вязаный (шерсть)</a> <br>
            <p class="short_info">цена: 1000 руб<br>
                Цвет: тёмно-синий<br>
                Статус: в наличии
            </p>
        </section>
   </article>
      </div>
CSSВыделить код
1
2
3
4
5
6
7
8
9
10
section{
  display: inline-block;
}
input[id="list_of_cats"]:checked ~ article section
{
    margin: 30px;
    width: 210px;
    border: 1px solid #000;
    display: block;
}
1
0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
28.10.2018, 19:15  [ТС] 15
Цитата Сообщение от AlexZaw Посмотреть сообщение
Так?
Да! именно так!
Благодарю! Проблема решена!
0
28.10.2018, 19:15
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.10.2018, 19:15
Помогаю со студенческими работами здесь

Разница между классом и идентификатором при указании CSS-стилей
Всем привет! Есть разница в использовании &quot;#&quot; или &quot;.&quot; перед использованием в создании стилей?...

Не работают псевдоселекторы с вендорными префиксами при объединении css-стилей
input:required:focus { transition: all 0.30s ease-in-out; box-shadow: 0 0 5px rgb(179, 0,...

Убрать блок по нажатии на ссылку без javascript
Здравствуйте господа, постало такое задание: проверить включен ли javascript у пользователя. Если...

Как подключить файл стилей CSS через JavaScript
вызов js скрита находится в теле документа. как мне в таком случае подключить CSS файлик &lt;link...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
Обновление сайта www.historian.b­y
Reglage 13.01.2025
За неделю добавил два урока - по ассемблеру и Линуксу, а также дополнил один урок по ассемблеру. Мелкими шагами двигаюсь дальше к неизменной цели. По ИТ: 1) добавил урок "Структура программы на. . .
Введение в модели и алгоритмы машинного обучения
InfoMaster 12.01.2025
Машинное обучение представляет собой одну из наиболее динамично развивающихся областей искусственного интеллекта, которая фокусируется на разработке алгоритмов и методов, позволяющих компьютерам. . .
Как на Python создать нейросеть для решения задач
InfoMaster 12.01.2025
В контексте стремительного развития современных технологий особое внимание уделяется таким инструментам, как нейросети. Эти структуры, вдохновленные биологическими нейронными сетями, используются для. . .
Как создать нейросеть для генерации картинок на Python
InfoMaster 12.01.2025
Генерация изображений с помощью искусственных нейронных сетей стала одним из наиболее захватывающих направлений в области компьютерного зрения и машинного обучения. В этой статье мы рассмотрим. . .
Создание нейросети для генерации текста на Python
InfoMaster 12.01.2025
Нейросети, или искусственные нейронные сети, представляют собой модели машинного обучения, вдохновленные работой человеческого мозга. Они состоят из множества взаимосвязанных узлов, или "нейронов",. . .
Как создать нейросеть распознавания изображений на Python
InfoMaster 12.01.2025
Введение в распознавание изображений с помощью нейросетей Распознавание изображений с помощью нейронных сетей стало одним из самых впечатляющих достижений в области искусственного интеллекта. Эта. . .
Основы искуственного интеллекта
InfoMaster 12.01.2025
Искусственный интеллект (ИИ) представляет собой одну из наиболее динамично развивающихся областей современной науки и технологий. В широком смысле под искусственным интеллектом понимается способность. . .
Python и нейросети
InfoMaster 12.01.2025
Искусственные нейронные сети стали неотъемлемой частью современных технологий, революционизировав множество областей - от медицинской диагностики до автономных транспортных средств. Python, благодаря. . .
Python в машинном обучении
InfoMaster 12.01.2025
Python стал неотъемлемой частью современного машинного обучения, завоевав позицию ведущего языка программирования в этой области. Его популярность обусловлена несколькими ключевыми факторами, которые. . .
Создание UI на Python с TKinter
InfoMaster 12.01.2025
TKinter — это одна из наиболее популярных библиотек для создания графических интерфейсов пользователей (GUI) в языке программирования Python. TKinter входит в стандартную библиотеку Python, что. . .
HTML5 в разработке мобильных приложений
InfoMaster 12.01.2025
Введение: Обзор роли HTML5 в мобильной разработке В современном мире мобильных технологий HTML5 стал ключевым инструментом для разработки кроссплатформенных приложений. Эта технология произвела. . .
Как создавать приложения для iOS/iPhone
InfoMaster 12.01.2025
Введение в разработку iOS-приложений Разработка приложений для iOS открывает огромные возможности в мире мобильных технологий. С каждым годом количество пользователей iPhone и iPad растет,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru