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

【问题标题】：How to display a hidden element when the page is opened?打开页面时如何显示隐藏元素？
【发布时间】：2021-05-06 17:46:05
【问题描述】：

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

我的问题是没有起始链接，打开页面时主菜单是隐藏的。我不想要那个打开链接。

除了第一个链接，我能做些什么来让主菜单立即可见？

.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。

【问题讨论】：

您已经在使用:target。只为其他目标添加，隐藏主菜单？
@PraveenKumarPurushothaman 打开文件时没有目标。在某些系统上，我可以使用mypage.html#main 打开页面，但其他系统无法将其识别为有效的 html 文件。我也尝试过:not(:target)，但无济于事。
啊，我正想说:not(:target)
@PraveenKumarPurushothaman 隐藏主菜单？问题是主菜单被隐藏了。它似乎是 Catch-22。

标签： html css hidden

【解决方案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>

【讨论】：

谢谢，这在 sn-p 示例中确实有用。稍后我会详细检查它，看看我是否可以让它在真实代码中工作，该代码还具有纵向/横向和高度约束的替代布局。
太完美了，很好地满足了我的需求。多年来我一直在努力解决这个问题！