0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
|
|||||||||||
1 | |||||||||||
Переключение стилей при нажатии через css, без javascript28.10.2018, 13:48. Показов 14993. Ответов 14
Необходимо реализовать смену стилей при выборе элемента input type="radio" c id="list"
Есть html-ка там в блоке article много однотипных section'ов, со свойством display: inline-block; Надо, чтобы при выборе пользователем через радио-элемент другого стиля отображения стиль менялся (блоки начинали отображаться в по одному в столбик друг за другом, размер блоков менялся и еще некоторые незначительные изменения контента. Моя гипотеза была сделать так:
Кнопки размещены в header, контент в article Радио-кнопки создаю так:
0
|
28.10.2018, 13:48 | |
Ответы с готовыми решениями:
14
CSS переключение файлов стилей Чем отличается импорт стилей от подключения связанных стилей 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
|
28.10.2018, 14:32 | 3 | |||||
0
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
||||||
28.10.2018, 14:57 | 4 | |||||
Fedor92, тогда уж как-то так:
0
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
|
28.10.2018, 15:22 | 6 |
Тогда текст кнопок будет на разных строках. Придется загонять обе кнопки в один див, и надпись "Список" все-равно оборачивать в label что-бы она была кликабельной
0
|
28.10.2018, 15:35 | 7 |
Внимательно посмотрите на вёрстку ТС, кликабельность метки предложили Вы, а не ТС... И я немного не то имел ввиду... Общая обёртка для всех вложенных элементов, input+div - можно с метками...
0
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
|
28.10.2018, 16:00 | 8 |
Как раз у ТС надписи вместе с input и обернуты в label, и следовательно являются ккликабельными.
Не совсем понял, что имеется ввиду. Не могли бы пример набросать?
1
|
28.10.2018, 16:09 | 9 | |||||
Точно, малость зарапортовался...
Классические табы на css:
1
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
|
28.10.2018, 16:40 | 10 |
Табы, на мой взгляд, это не то, что нужно в данном случае. Насколько я понял, ТС хочет изменить отображение блоков из строки в столбик. Т.е. как-бы повели себя карточки товаров в магазине при адаптации. Но пока ТС молчит и не предоставляет полный код, мы можем до посинения гадать и придумывать различные варианты
0
|
28.10.2018, 16:43 | 11 |
Увидим, я просто структурно показал расположение блоков в вёрстке на примере табов... На checked можно привязать изменение стилей или даже сублимировать табы и начальную задачу...
0
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
|
28.10.2018, 16:59 | 12 |
Кстати да, вполне возможно что это то, что нужно Не один раз уже были темы где требовалось одно, а, в итоге, оказывалось совсем другое.
За пример спасибо, как то в голову даже не приходило что можно так расставить инпуты. По наивности все время их вначале втыкал не задумываясь
0
|
0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
|
||||||
28.10.2018, 17:25 [ТС] | 13 | |||||
Именно это мне и нужно сделать.
Структура моего кода на данный момент следующая:
Добавлено через 2 минуты Пробовала написать input внутри article, но тоже не получилось заставить работать
0
|
Модератор
2352 / 1720 / 668
Регистрация: 07.08.2016
Сообщений: 4,050
|
|||||||||||
28.10.2018, 18:24 | 14 | ||||||||||
Сообщение было отмечено Колос Алена как решение
Решение
Так?
1
|
0 / 0 / 0
Регистрация: 13.01.2017
Сообщений: 15
|
|
28.10.2018, 19:15 [ТС] | 15 |
0
|
28.10.2018, 19:15 | |
28.10.2018, 19:15 | ||||||
Помогаю со студенческими работами здесь
15
Разница между классом и идентификатором при указании CSS-стилей Не работают псевдоселекторы с вендорными префиксами при объединении css-стилей Убрать блок по нажатии на ссылку без javascript Как подключить файл стилей CSS через JavaScript Искать еще темы с ответами Или воспользуйтесь поиском по форуму:
|
|
Новые блоги и статьи | |||||
Обновление сайта www.historian.by
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 растет,. . .
|