Question

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

我可以使其与<a href='#div'></a>和:target一起使用，并且如果我将.page格放在<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>

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

1 个答案: