html - Css 目标切换 - 初始设置为可见

Question

我有一个简单的 html/css 切换设置

#toggle1 {
  display: none;
}

#toggle1:target {
  display: block;
}

#toggle2 {
  display: none;
}

#toggle2:target {
  display: block;
}

<a href="#toggle1">Show1</a><br />
<a href="#toggle2">Show2</a>
<p id="toggle1">1</p>
<p id="toggle2">2</p>

这通过显示和隐藏按需工作。但是我希望初始段落在页面加载时可见。如果我删除 #toggle1 {display: none;} 它不能正常工作。

任何帮助都将非常有帮助和感激。

提前致谢。

Answer 1

这只是一个 hack，但如果你反转隐藏元素的顺序，将 display:block 添加到“默认”元素，然后添加 display:none 到 :target ~ #toggle1 它应该模拟默认选择的元素:

#toggle1, #toggle1:target, #toggle2:target {
  display: block;
}
:target ~ #toggle1, #toggle2 {
  display: none;
}

<a href="#toggle1">Show1</a><br />
<a href="#toggle2">Show2</a>
<p id="toggle2">2</p>
<p id="toggle1">1</p>