如何在单个HTML页面中实现多页面切换（单次仅显示一个）？

嘿，这个需求在单页场景里太常见了！咱们完全可以用原生HTML/CSS/JavaScript搞定，不用依赖任何框架，我给你分享两种最实用的方案：

方案一：JavaScript + CSS 切换（最灵活，推荐） #

这种方法可控性最强，还能轻松加动画效果，步骤超简单：

首先写HTML结构，包含切换按钮和对应的内容区块：

<!-- 切换按钮 -->
<button id="showNews">新闻</button>
<button id="showContact">联系</button>

<!-- 内容区域 -->
<div id="newsContent" class="content active">
  <h2>新闻页面</h2>
  <p>这里是最新的行业新闻，比如XXX发布了新功能...</p>
</div>
<div id="contactContent" class="content">
  <h2>联系我们</h2>
  <p>邮箱：support@example.com | 电话：400-123-4567</p>
</div>

然后用CSS设置默认隐藏非初始内容，只有带active类的区块才显示：

.content {
  /* 默认隐藏所有内容区块 */
  display: none;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 显示激活的内容区块 */
.content.active {
  display: block;
}

/* 可选：给激活的按钮加样式，提示当前选中状态 */
button.active {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
}

最后用JavaScript给按钮绑定点击事件，切换active类：

// 获取页面元素
const newsBtn = document.getElementById('showNews');
const contactBtn = document.getElementById('showContact');
const newsContent = document.getElementById('newsContent');
const contactContent = document.getElementById('contactContent');

// 切换到新闻页面
newsBtn.addEventListener('click', () => {
  newsContent.classList.add('active');
  contactContent.classList.remove('active');
  // 同步按钮状态
  newsBtn.classList.add('active');
  contactBtn.classList.remove('active');
});

// 切换到联系页面
contactBtn.addEventListener('click', () => {
  contactContent.classList.add('active');
  newsContent.classList.remove('active');
  // 同步按钮状态
  contactBtn.classList.add('active');
  newsBtn.classList.remove('active');
});

要是想让切换更丝滑，把CSS里的display换成opacity和visibility就行：

.content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.content.active {
  opacity: 1;
  visibility: visible;
}

方案二：纯CSS :target 伪类（无需JavaScript） #

如果需求简单，不想写JS，可以用CSS的:target伪类，利用URL锚点来切换内容：

HTML结构：

<!-- 用a标签作为切换按钮，href指向对应内容的ID -->
<a href="#news" class="tab-link">新闻</a>
<a href="#contact" class="tab-link">联系</a>

<!-- 内容区域 -->
<div id="news" class="content default-show">
  <h2>新闻页面</h2>
  <p>这里是最新的行业新闻，比如XXX发布了新功能...</p>
</div>
<div id="contact" class="content">
  <h2>联系我们</h2>
  <p>邮箱：support@example.com | 电话：400-123-4567</p>
</div>

CSS代码：

.content {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 当锚点匹配元素ID时，显示该内容 */
.content:target {
  display: block;
}

/* 默认显示新闻页面 */
.content.default-show {
  display: block;
}

/* 可选：给当前锚点对应的链接加样式 */
.tab-link:target {
  color: #007bff;
  font-weight: bold;
}

这个方法的好处是不用写JS，但缺点是URL会跟着锚点变化，刷新页面会停在当前选中的页面，复杂逻辑（比如按钮状态同步）处理起来不如JS灵活。

内容的提问来源于stack exchange，提问作者Rehy