我创建了一个只使用CSS/HTML/PHP的“CSS-only”网站,它有CSS菜单、动态加载内容(图片)和CSS放大镜。我不想使用Javascript/jQuery或Cookies,到目前为止,这个网站运行得很好。这个布局很难调整到适合所有浏览器,但最终我让苹果InternetExplorer(Safari)也工作了。
对于菜单,我使用了"Checkbox Hack"。但是我没有使用复选框,而是使用单选按钮只显示一个内容页。看起来是这样的:
<!--
We need these input-fields to trigger display:block on another element
The radio-buttons must use the same "name" to jump between different content-pages.
(only 1 Radio-Button can be active)
-->
<input type="radio" id="radioactive-1" name="radioactive">
<input type="radio" id="radioactive-2" name="radioactive">
<!-- This simple menu triggers the radio-button with the id (for=id) -->
<label for="radioactive-1">Menu-Entry 1</label>
<label for="radioactive-2">Menu-Entry 2</label>
<!-- Heres the content to display, but it is set to display: none;
so the content only gets displayed if the correct radio-button is active -->
<div id='content-wrapper'>
<div id='not-radioactive-1' style='display:none;'></div>
<div id='not-radioactive-2' style='display:none;'></div>
</div>
这个加价被缩短了,但我认为已经足够清楚了。现在,我们需要CSS,它对于让这个工作很重要:
input[id="radioactive-1"]:checked ~ #content-wrapper #not-radioactive-1 {
display:block!important;
}
input[id="radioactive-2"]:checked ~ #content-wrapper #not-radioactive-2 {
display:block!important;
}
您可以看到,这些CSS声明可能会变得很长,我只需单击一次就可以将多个样式触发到不同的元素。菜单的代码约为20kb,非常庞大(相当于CSS文件大小的50%)
现在我的问题是:有没有办法得到输入字段的类编号,以便将其用于content类?
例子:
input[id="radioactive-$value"]:checked ~ #not-radioactive-$value
我知道一种方法可以忽略这个数字,使用所有id,包括一个定义好的字符串。
例子:
input[id^="radioactive-"]:checked
我也知道我可以使用PHP,只需做一个循环,但最终CSS的大小是一样的,因为整个代码都会得到响应。如果可能的话,我正在寻找一个只支持CSS的解决方案。我只想缩短代码并加快页面加载速度。
最佳答案
通过直接在每个部分前面插入单选按钮,您可以在不依赖这些数字的情况下执行此操作:
HTML格式:
<div id="content-wrapper">
<input type="radio" id="radioactive-1" name="radioactive">
<div class="content"></div>
<input type="radio" id="radioactive-2" name="radioactive">
<div class="content"></div>
</div>
CSS:
.content {
display: none;
}
input[name="radioactive"]:checked + .content {
display: block;
}
只要
for
属性与某些输入匹配,标签在哪里并不重要。