仅 CSS 导航 - 单选框显示/隐藏页面

Question

我正在尝试使用radio boxes制作站点导航栏， 页面的显示位置取决于选中的内容。

我可以让它与<a href='#div'></a>和:target一起工作， 如果我把.pagediv放在<label>之后.

但是不知道如何使用<input type='radio'>和 标记如下。

这能做到吗？

标记很简单：

.page {
display: none;
}
#pages > div:<the-missing-part> {
display: block;
}

<div class="toolbar">
<input type="radio" id="radio1" name="radios" value="div1">
<label for="radio1">Div #1</label>
<input type="radio" id="radio2" name="radios" value="div2">
<label for="radio2">Div #2</label>
<input type="radio" id="radio3" name="radios" value="div3">
<label for="radio3">Div #3</label>
</div>
<div id="pages">
<div id="div1" class="page">Page #1</div>
<div id="div2" class="page">Page #2</div>
<div id="div3" class="page">Page #3</div>
</div>

Answer 1

为此，页面和复选框需要共享相同的父元素，以便您可以将它们与通用的同级组合器(~(链接：

.page {
display: none;
}
#radio1:checked ~ #div1,
#radio2:checked ~ #div2,
#radio3:checked ~ #div3 {
display: block;
}

<div class="toolbar">
<input type="radio" id="radio1" name="radios" value="div1">
<label for="radio1">Div #1</label>
<input type="radio" id="radio2" name="radios" value="div2">
<label for="radio2">Div #2</label>
<input type="radio" id="radio3" name="radios" value="div3">
<label for="radio3">Div #3</label>
<div id="div1" class="page">Page #1</div>
<div id="div2" class="page">Page #2</div>
<div id="div3" class="page">Page #3</div>
</div>