Javascript 在一个html文件中包含多个页面，每个页面上没有固定导航

主页上只有几个按钮可以显示用户指定的内容

#home

中的按钮不在标题中，因此按钮将仅显示在

#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">

除了

#home

之外的每个部分都有返回按钮，该按钮也会将用户发送到

#home

。这在

：target

方法上相当简单，因为我只使用了

a href=“#”

，而且它很有效

---

我还可以使用什么方法呢？

我想不出任何纯CSS的方法来实现这一点，但只需一点JavaScript就可以轻松完成，检查哈希是否为空，然后显示

#home

，并在有值时隐藏它

window.onhashchange=checkHash；
checkHash（）；
函数checkHash（）{
var home=document.getElementById（'home'）；
//检查哈希是否为空
if（window.location.hash.substring（1）=''）{
home.style.display='block'；
}否则{
home.style.display='none'；
}
}

部分{
显示：无；
}
.章节：目标{
显示：块！重要；
}

家
内容
还有别的事吗

因此，当标题类似于

www.example.com/html.html

时，您希望默认情况下显示

#home

，然后在指定为

www.example.com/html.html#content

？@JackStoller Yes，因此

www.example.com

将显示

#home

内容，这将只是其他内容的按钮，单击按钮后，它将成为

www.example.com#content

，并将显示

内容

内容。谢谢！这正是我需要的。我只是想知道，如果我要在页面之间添加一些转换，我应该做一些额外的javascript吗？或者只是把过渡放在第节下就行了？这取决于你们的过渡<代码>显示无法设置动画。如果您想要淡入/淡出，您必须使用

不透明度

和其他工具来停止单击（

显示

，

z索引

，等等）。如果您想要滑入/滑出，您可以使用

边距

或

变换：平移（）。放大/缩小将是
transform:scale（）
。其他任何东西都可能需要CSS动画。如果你想要某种风格的话，我可以用它来编辑我的答案。我想的只是有点褪色。我尝试过不透明度，但它对我不起作用：（。如果它不太麻烦你，编辑答案将不胜感激。@HobbitY好的，请看我的编辑。我想这就是你要找的。
section {
  display: none;
}
section:target {
  display: block;
}