如何在页面打开时显示隐藏元素？

Question

我有一系列可以移动的 div 元素，一次只能看到一个部分。这是一个简化的例子，那部分没问题。

我的问题是没有启动 link，打开页面时主菜单是隐藏的。我不想要那个开头 link.

除了第一个 link，我还能做些什么才能立即看到主菜单？

.hid {
  display: none;
}

.hid:target {
  display: block;
}

<a href='#main'>Start</a>

<div class='hid' id='main'>
  <h3>This is main menu</h3>
  <p><a href='#menuA'>Goto menu A</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuA'>
  <h3>This is menu A</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuB'>
  <h3>This is menu B</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuA'>Goto menu A</a>
</div>

我只想使用 CSS。

Answer 1

将主菜单放在最后一个。在它上面使用 display:block，然后当其中一个成为目标时再次隐藏它

.hid {
  display: none;
}

.hid:target,
#main {
  display: block;
}

.hid:target ~ #main {
  display:none;
}

<div class='hid' id='menuA'>
  <h3>This is menu A</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

<div class='hid' id='menuB'>
  <h3>This is menu B</h3>
  <p><a href='#main'>Goto main menu</a>
    <p><a href='#menuA'>Goto menu A</a>
</div>

<div class='hid' id='main'>
  <h3>This is main menu</h3>
  <p><a href='#menuA'>Goto menu A</a>
    <p><a href='#menuB'>Goto menu B</a>
</div>

如何在页面打开时显示隐藏元素？

How to display a hidden element when the page is opened?

html

css

hidden