Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

这可以通过显示和隐藏来实现。但是我想在页面加载时看到初始段落。如果我删除#toggle1 {display: none;}，则无效。

任何帮助都会非常有帮助和赞赏。

提前致谢。

Answer 1

这只是一个黑客攻击，但是如果你颠倒隐藏元素的顺序，请将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>

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

1 个答案: