Есть ли способ динамически изменять контент без javascript?

Question

Я создаю страницу для работы, в которой есть раздел, где содержимое должно динамически меняться при нажатии кнопки (ов). Я знаю несколько разных способов сделать это, но все они связаны с тем или иным видом javascript. Мои возможности в настоящее время не включают сценарий написания для этого сайта, поэтому я исследую, есть ли способ сделать это с помощью JUST css, прежде чем сообщать менеджеру моего проекта, что одному из наших парней javascript придется его обрабатывать. Итак, кто-нибудь знает какие-нибудь классные методы CSS, которые могут получить желаемый эффект?

Answer 1

Возможно, вы можете использовать CSS :target pseudo-class selector. Это потребует замены вместо кнопок a элементов, которые заставляют URL вашего документа применять хэш, относящийся к атрибуту id элемента, который вы хотите изменить.

div { 
 
    display: none; 
 
} 
 

 
:target { 
 
    display: block; 
 
}

<a href="#foo">Click here to show the hidden <code>div</code> element</a><br> 
 
<a href="#">Click here to hide it again</a>. 
 
<div id="foo">This should only show when the link is clicked.</div>

Answer 2

Я не думаю, что есть какой-нибудь способ, чтобы непосредственно изменять содержимое с помощью CSS, так как предполагает его название, это специально для стиля. Извините, я не знаю никаких трюков. Я не думаю, что CSS на самом деле является подходящим способом сделать это, потому что это не хорошая организация кода (хотя сеть пока не известна хорошей организации кода). Это должно быть очень просто, чтобы ударить javascript, поэтому я рекомендую просто сделать это самостоятельно, если это вообще возможно. Изменение содержимого нажатием кнопки действительно не является сложной проблемой javascript. Бросьте в некоторый jquery, и вы также можете получить слабые переходы.

HTML не предназначен для динамических, это просто формат документа, более или менее. Я не думаю, что CSS был разработан для большого динамизма, просто изменяя стили на определенных событиях. Поэтому я думаю, потому что изменение содержания не меняет стиль, это либо невозможно, либо не очень красивый способ сделать это.

Удачи вам!

Answer 3

Да, вы можете использовать динамический контент без какого-либо языка сценариев, но ваши варианты очень ограничены. Как предложил Джеймс, вы используете CSS. Одним из распространенных способов является использование флажков и метки для контроля видимости элементов. Вы используете это, чтобы создавать простые игры, меню вкладок и многое другое.

Отличный учебник с примерами вы можете попробовать это на http://css-tricks.com/the-checkbox-hack/, но в сущности, вы могли бы сделать что-то вроде этого: (из учебника)

input[type=checkbox]:checked ~ div { 
    background: red; 
} 

Обратите внимание, что у вас есть: проверили имущество, а также общий селектор в этом примере. Вы можете получить гораздо более сложный.

Проверьте игру CSS Panic, которая использует эту же функцию.