我创建了一个只使用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属性与某些输入匹配,标签在哪里并不重要。

07-24 09:51
查看更多