Question

我创建了一个“仅限CSS”的网站，它只使用CSS / HTML / PHP，CSS菜单，动态加载内容（图像）和CSS放大镜。我不想使用Javascript / jQuery或Cookies，到目前为止网站运行良好。布局很难调整到适合所有浏览器，但最后我也得到了Apple-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声明可以变得很长，只需点击一下就可以触发不同元素的多种样式。菜单的代码大约是20 KB，而且很大。（我的CSS文件大小的50％）

现在我的问题：有没有办法让输入字段的类号用于内容类？

示例：

input[id="radioactive-$value"]:checked ~ #not-radioactive-$value

我知道一种忽略数字的方法，并使用包含已定义字符串的所有id。

示例：

input[id^="radioactive-"]:checked

我也知道我可以使用PHP并且只是做一个循环但最后CSS具有相同的大小，因为整个代码得到了回应。如果可能，我正在寻找仅限CSS的解决方案。我只想缩短代码并加快页面加载速度。

Answer 1

您可以在不依赖于这些数字的情况下直接在每个部分之前插入单选按钮来执行此操作：

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属性与某些输入相匹配，标签的位置无关紧要。

Answer 2

一个解决方案是你可以在HTML文件中使用PHP循环并使用循环，打印以下代码，

<div id='content-wrapper'>
    <input type="radio" id="radioactive-1" name="radioactive">
    <label for="radioactive-1">Menu-Entry 1</label>
    <div id='not-radioactive-1' style='display:none;'></div>

    <input type="radio" id="radioactive-2" name="radioactive">
    <label for="radioactive-2">Menu-Entry 2</label>
    <div id='not-radioactive-2' style='display:none;'></div>
</div>

CSS文件将具有以下内容，

input[type="radio"]:checked ~ div {
    display:block!important;
}

CSS：使用类/ id的编号作为另一个类/ id

2 个答案: