html - 使用 anchor 和 :target for navigation. 如何默认显示第一层

Question

我正在尝试使用 anchor 和 CSS 作为导航。

如果用户点击菜单链接，应该显示 anchor 目标部分，但其他部分应该隐藏。

这是我正在使用的布局:

    <nav>
      <ul>
        <li><a href="#page1">Page #1</a></li>
        <li><a href="#page2">Page #2</a></li>
        <li><a href="#page3">Page #3</a></li>
      </ul>
    </nav>
    <div>
      <section id="page1">
        <h2>Page #1</h2>
      </section>
      <section id="page2">
        <h2>Page #2</h2>
      </section>
      <section id="page3">
        <h2>Page #3</h2>
      </section>
    </div>

这是我正在使用的 CSS:

    section:not(:target) {
      display: none;
    }
    section:target {
      display: block;
    }

一切正常，但我如何默认显示第一页？

Answer 1

您可以将第一页设置为 display:block; 并将其绝对定位为具有比其他页面更低的 z-index。

这样，它默认显示，您可以使用 :target 伪选择器在其上显示其他内容。

DEMO

CSS:

#page1 {
    display:block;
    position:absolute;
    top:76px;
    z-index:1
}
section:not(:target) {
    display: none;
}
section:target {
    display: block;
    background-color: #fff;
    position:relative;
    z-index:2;
}