一个 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没有显示。似乎只有当我在外面有固定标题时它才有效sectionsection {  display: none;}section:target {  display: block;}除此以外的每个部分#home都会有后退按钮，该按钮也会将用户发送到该按钮#home。这在方法上相当简单，:target因为我刚刚使用了a href="#"，并且它有效。我还可以使用什么其他方法？

Answer 1

我想不出任何纯 CSS 方法来做到这一点，但可以使用一些 JavaScript 轻松完成，检查哈希值是否为空，然后在有值时显示和隐藏#home它。

window.onhashchange = checkHash;

checkHash();

function checkHash() {

  var home = document.getElementById('home');

  //Check if the hash is empty

  if (window.location.hash.substring(1) == '') {

    home.style.display = 'block';

  } else {

    home.style.display = 'none';

  }

}

.section {

  display: none;

}

.section:target {

  display: block !important;

}

<div id="home" class="section">

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

  <a href="#somthingElse">Somthing Else</a>

  <h3>Home</h3>

</div>

<div id="content" class="section">

  <a href="#home">Home</a>

  <h3>Content</h3>

</div>

<div id="somthingElse" class="section">

  <a href="#home">Home</a>

  <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() {

  //Check if the hash is empty

  if (window.location.hash.substring(1) == '') {

    history.replaceState(undefined, undefined, "#home")

  }

}

.section {

  position: absolute;

  z-index: -1;

  

  opacity: 0;

  

  transition: opacity 0.5s;  

}

.section:target {

  z-index: 1;

  opacity: 1;

}

<div id="home" class="section">

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

  <a href="#somthingElse">Somthing Else</a>

  <h3>Home</h3>

</div>

<div id="content" class="section">

  <a href="#home">Home</a>

  <h3>Content</h3>

</div>

<div id="somthingElse" class="section">

  <a href="#home">Home</a>

  <h3>Somthing Else</h3>

</div>