一个 html 文件中的多个页面，每一页上没有固定的导航

Question

主页只有几个按钮，用于显示用户指定的内容。

这些按钮#home不在标题中，因此按钮将仅显示在 on 上#home。

<section id="home">

  <a href="#content">content</a>

  <a href="#something">something</a>

  <a href="#someelse">someelse</a>

</section>

<section id="content">

<section id="something">

<section id="someelse">

我:target在 css 上找到了方法，它看起来很容易使用并且工作正常，但#home没有显示。似乎只有当我在外面有固定标题时它才有效section

section {

  display: none;

}

section:target {

  display: block;

}

除此以外的每个部分#home都会有后退按钮，该按钮也会将用户发送到该按钮#home。这在方法上相当简单，:target因为我刚刚使用了a href="#"，并且它有效。

我还可以使用什么其他方法？

Answer 1

我想不出任何纯 CSS 方法来做到这一点，但可以使用一些 JavaScript 轻松完成，检查哈希值是否为空，然后在有值时显示和隐藏#home它。window.onhashchange = checkHash;checkHash();function checkHash() {&nbsp; var home = document.getElementById('home');&nbsp; //Check if the hash is empty&nbsp; if (window.location.hash.substring(1) == '') {&nbsp; &nbsp; home.style.display = 'block';&nbsp; } else {&nbsp; &nbsp; home.style.display = 'none';&nbsp; }}.section {&nbsp; display: none;}.section:target {&nbsp; display: block !important;}<div id="home" class="section">&nbsp; <a href="#content">Content</a>&nbsp; <a href="#somthingElse">Somthing Else</a>&nbsp; <h3>Home</h3></div><div id="content" class="section">&nbsp; <a href="#home">Home</a>&nbsp; <h3>Content</h3></div><div id="somthingElse" class="section">&nbsp; <a href="#home">Home</a>&nbsp; <h3>Somthing Else</h3></div>褪色我用的position: absolute是这样它们会堆叠在一起。z-index: -1将使所有其余部分保持清晰，以阻止指针事件重叠。opacity: 0显然是用于淡入淡出。我更改了 JS 脚本以简化 CSS。现在，当您转到时，example.com/html.html您会被重定向到example.com/html.html#home（没有后退按钮的历史记录更改）。window.onhashchange = checkHash;checkHash();function checkHash() {&nbsp; //Check if the hash is empty&nbsp; if (window.location.hash.substring(1) == '') {&nbsp; &nbsp; history.replaceState(undefined, undefined, "#home")&nbsp; }}.section {&nbsp; position: absolute;&nbsp; z-index: -1;&nbsp;&nbsp;&nbsp; opacity: 0;&nbsp;&nbsp;&nbsp; transition: opacity 0.5s;&nbsp;&nbsp;}.section:target {&nbsp; z-index: 1;&nbsp; opacity: 1;}<div id="home" class="section">&nbsp; <a href="#content">Content</a>&nbsp; <a href="#somthingElse">Somthing Else</a>&nbsp; <h3>Home</h3></div><div id="content" class="section">&nbsp; <a href="#home">Home</a>&nbsp; <h3>Content</h3></div><div id="somthingElse" class="section">&nbsp; <a href="#home">Home</a>&nbsp; <h3>Somthing Else</h3></div>