Question

我试图使用锚点和CSS作为导航。

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

以下是我使用的布局：

    <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索引将其置于绝对位置。

这样，它默认显示，您可以使用: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;
}

使用锚点和：目标导航。如何默认显示第一层

1 个答案: