仅显示具有特定 id 的元素（在 url 中确定）

Question

我一直在从事一个编码项目，我一直在尝试在一个 html 文件中拥有多个“页面”（例如 awsomesauce.com/page.html#videos 并仅显示视频部分），同时具有相同的导航栏等到目前为止，javascript 让我失望了。有什么想法吗？

<script>
// Get the current URL (awsomesauce.com/page#videos in this instance)
let url = window.location.href;
// Get the length of the current URL
let urlLength = window.location.href.length;
// Extract the portion of the URL starting from index 21
let  = url.substr(21, urlLength);
</script>

Answer 1

如果页面上已有所有部分，您可以使用 CSS 隐藏/显示内容，例如：

<div class="section" id="A">A</div>
<div class="section" id="B">B</div>
<div class="section" id="C">C</div>

对于您的 CSS，请使用

:target

伪类 来使用 URL 的片段（例如：

#vidoes

组件）将可见性样式应用到：

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

.section:target {
  display: block;
}