打开页面，隐藏所有内容，除了 URL 说要打开的内容

Question

How to link to a <div> on another page? 正在展示如何将Link text 转换为 div id，但我要做的是编写一个网页，该网页与其他页面链接，但隐藏了所有内容，但链接 id 表示要显示的内容。 o page1链接到infopage.html，内容A可见，page2链接到infopage.html，内容B可见，page3链接到infopage.html，内容C可见，依此类推。使用普通的HTML、CSS 和vanilla JavaScript。请不要jQuery；试图了解这将如何联系在一起。希望我解释得足够清楚

Answer 1

一种选择是使用:target 选择器。

您使用display: none; 隐藏了CSS 中的所有内容。然后你可以使用*:target { display: block; }在点击链接时显示内容

如果您想从其他网站加载内容，您可以使用PHP include 或iframe。但是，您不能轻易地仅显示网站的特定部分。您需要使用上述相同的方法覆盖其默认样式。

main > div {
  display: none;
}

main > div:target {
  display: block;
}


/* For Styling Pupose only */

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin: 0 10px;
}

<nav>
  <ul>
    <li><a href="#A">Content A</a></li>
    <li><a href="#B">Content B</a></li>
    <li><a href="#C">Content C</a></li>
  </ul>
</nav>

<main>
  <div id="A">This is Content A</div>
  <div id="B">This is Content B</div>
  <div id="C">This is Content C</div>
</main>

Answer 2

这是实现这一目标的一种快速而肮脏的方法：

• 默认隐藏所有文章
• window.location.href.split('#')[1] 将为您提供锚名称
• classList.remove('hidden') 从选中的文章中移除隐藏类

page1.html

<style> .hidden { display: none; }</style>

<div id="article1" class="hidden"><h2>Article 1</h2></div>
<div id="article2" class="hidden"><h2>Article 2</h2></div>

<p><a href="page2.html#article3">Go to Article 3</a></p>
<p><a href="page2.html#article4">Go to Article 4</a></p>

<script>
    document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>

page2.html

<style>.hidden { display: none; } </style>

<div id="article3" class="hidden"><h2>Article 3</h2></div>
<div id="article4" class="hidden"><h2>Article 4</h2></div>

<p><a href="page1.html#article4">Go to Article 1</a></p>
<p><a href="page1.html#article5">Go to Article 2</a></p>

<script>
    document.querySelector(`#${window.location.href.split('#')[1]}`).classList.remove('hidden');
</script>