基础纯 HTML/CSS 实现（无 JavaScript）
这种方法最简单，适用于只需要点击跳转到不同页面的场景,所有内容一次性加载。
（图片来源网络，侵删）
特点：
- 纯前端，无需 JS。
- 点击后页面会刷新或跳转。
- 代码量最少。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新闻 Tab - 纯 CSS 实现</title>
<style>
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
/* Tab 导航样式 */
.tab-nav {
display: flex;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
}
.tab-nav a {
flex: 1; /* 让每个选项卡平均分配宽度 */
text-align: center;
padding: 12px 20px;
text-decoration: none;
color: #666;
border: 1px solid transparent;
border-bottom: none;
transition: all 0.3s ease;
}
.tab-nav a:hover {
background-color: #f9f9f9;
color: #007bff;
}
/* 当前激活的 Tab 样式 */
.tab-nav a.active {
color: #007bff;
border: 1px solid #eee;
border-bottom-color: #fff;
margin-bottom: -2px;
font-weight: bold;
}
/* Tab 内容区域 */
.tab-content {
padding: 20px 0;
}
.tab-pane {
display: none; /* 默认隐藏所有内容 */
}
.tab-pane.active {
display: block; /* 显示激活的内容 */
}
.news-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.news-item:last-child {
border-bottom: none;
}
.news-item h3 {
margin: 0 0 5px 0;
}
.news-item a {
color: #007bff;
text-decoration: none;
}
.news-item a:hover {
text-decoration: underline;
}
.news-meta {
font-size: 0.9em;
color: #888;
}
</style>
</head>
<body>
<div class="container">
<h1>每日新闻</h1>
<!-- Tab 导航 -->
<div class="tab-nav">
<!-- 使用锚点链接，href 对应下方内容的 id -->
<a href="#tab1" class="active">国内新闻</a>
<a href="#tab2">国际新闻</a>
<a href="#tab3">科技新闻</a>
</div>
<!-- Tab 内容 -->
<div class="tab-content">
<!-- 国内新闻 -->
<div id="tab1" class="tab-pane active">
<div class="news-item">
<h3><a href="#">我国成功发射新型遥感卫星，用于环境监测</a></h3>
<p class="news-meta">2025年10月27日 10:30 来源：新华社</p>
</div>
<div class="news-item">
<h3><a href="#">全国多地迎来降温，请注意添衣保暖</a></h3>
<p class="news-meta">2025年10月27日 09:15 来源：中国天气网</p>
</div>
<div class="news-item">
<h3><a href="#">第三季度GDP同比增长4.9%，经济持续恢复向好</a></h3>
<p class="news-meta">2025年10月26日 14:00 来源：国家统计局</p>
</div>
</div>
<!-- 国际新闻 -->
<div id="tab2" class="tab-pane">
<div class="news-item">
<h3><a href="#">联合国气候变化大会在迪拜开幕</a></h3>
<p class="news-meta">2025年10月27日 11:00 来源：路透社</p>
</div>
<div class="news-item">
<h3><a href="#">美联储宣布维持利率不变，市场反应积极</a></h3>
<p class="news-meta">2025年10月26日 22:30 来源：彭博社</p>
</div>
<div class="news-item">
<h3><a href="#">欧洲议会通过新法案，加强对大型科技公司的监管</a></h3>
<p class="news-meta">2025年10月25日 16:45 来源：欧洲新闻台</p>
</div>
</div>
<!-- 科技新闻 -->
<div id="tab3" class="tab-pane">
<div class="news-item">
<h3><a href="#">苹果发布新款MacBook Pro，搭载M3系列芯片</a></h3>
<p class="news-meta">2025年10月30日 01:00 来源：The Verge</p>
</div>
<div class="news-item">
<h3><a href="#">OpenAI发布Sora模型，能生成长达1分钟的高清视频</a></h3>
<p class="news-meta">2025年10月23日 20:00 来源：AI科技评论</p>
</div>
<div class="news-item">
<h3><a href="#">特斯拉推出全新自动驾驶测试版，城市街道导航能力增强</a></h3>
<p class="news-meta">2025年10月20日 18:30 来源：TechCrunch</p>
</div>
</div>
</div>
</div>
</body>
</html>
经典 JavaScript + DOM 操作实现
这是最常见、最灵活的实现方式,无需刷新页面即可切换内容。
特点：
- 单页面应用体验,切换流畅。
- 使用原生 JavaScript,不依赖任何库。
- 代码结构清晰,易于理解。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新闻 Tab - JS 实现</title>
<style>
/* CSS 样式与方案一基本相同，这里省略，可以直接复制方案一的 <style> 部分 */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; }
.container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { text-align: center; }
.tab-nav { display: flex; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.tab-nav button { /* 改用 button */ flex: 1; padding: 12px 20px; border: none; background: none; cursor: pointer; text-align: center; color: #666; font-size: 16px; transition: all 0.3s ease; position: relative; }
.tab-nav button:hover { background-color: #f9f9f9; color: #007bff; }
.tab-nav button.active { color: #007bff; }
.tab-nav button.active::after { /* 添加下划线指示器 */ content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #007bff; }
.tab-content { padding: 20px 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.news-item { padding: 15px 0; border-bottom: 1px solid #eee; }
.news-item:last-child { border-bottom: none; }
.news-item h3 { margin: 0 0 5px 0; }
.news-item a { color: #007bff; text-decoration: none; }
.news-item a:hover { text-decoration: underline; }
.news-meta { font-size: 0.9em; color: #888; }
</style>
</head>
<body>
<div class="container">
<h1>每日新闻</h1>
<!-- Tab 导航，使用 button -->
<div class="tab-nav">
<button class="tab-btn active" data-tab="tab1">国内新闻</button>
<button class="tab-btn" data-tab="tab2">国际新闻</button>
<button class="tab-btn" data-tab="tab3">科技新闻</button>
</div>
<!-- Tab 内容 -->
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<!-- 国内新闻内容 (与方案一相同) -->
<div class="news-item">
<h3><a href="#">我国成功发射新型遥感卫星，用于环境监测</a></h3>
<p class="news-meta">2025年10月27日 10:30 来源：新华社</p>
</div>
<div class="news-item">
<h3><a href="#">全国多地迎来降温，请注意添衣保暖</a></h3>
<p class="news-meta">2025年10月27日 09:15 来源：中国天气网</p>
</div>
<div class="news-item">
<h3><a href="#">第三季度GDP同比增长4.9%，经济持续恢复向好</a></h3>
<p class="news-meta">2025年10月26日 14:00 来源：国家统计局</p>
</div>
</div>
<div id="tab2" class="tab-pane">
<!-- 国际新闻内容 (与方案一相同) -->
<div class="news-item">
<h3><a href="#">联合国气候变化大会在迪拜开幕</a></h3>
<p class="news-meta">2025年10月27日 11:00 来源：路透社</p>
</div>
<div class="news-item">
<h3><a href="#">美联储宣布维持利率不变，市场反应积极</a></h3>
<p class="news-meta">2025年10月26日 22:30 来源：彭博社</p>
</div>
<div class="news-item">
<h3><a href="#">欧洲议会通过新法案，加强对大型科技公司的监管</a></h3>
<p class="news-meta">2025年10月25日 16:45 来源：欧洲新闻台</p>
</div>
</div>
<div id="tab3" class="tab-pane">
<!-- 科技新闻内容 (与方案一相同) -->
<div class="news-item">
<h3><a href="#">苹果发布新款MacBook Pro，搭载M3系列芯片</a></h3>
<p class="news-meta">2025年10月30日 01:00 来源：The Verge</p>
</div>
<div class="news-item">
<h3><a href="#">OpenAI发布Sora模型，能生成长达1分钟的高清视频</a></h3>
<p class="news-meta">2025年10月23日 20:00 来源：AI科技评论</p>
</div>
<div class="news-item">
<h3><a href="#">特斯拉推出全新自动驾驶测试版，城市街道导航能力增强</a></h3>
<p class="news-meta">2025年10月20日 18:30 来源：TechCrunch</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 1. 获取所有 Tab 按钮和所有内容面板
const tabBtns = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');
// 2. 为每个 Tab 按钮添加点击事件监听器
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// a. 获取被点击按钮的 data-tab 属性值（'tab1'）
const activeTabId = btn.getAttribute('data-tab');
// b. 移除所有按钮和面板的 'active' 类
tabBtns.forEach(b => b.classList.remove('active'));
tabPanes.forEach(p => p.classList.remove('active'));
// c. 给被点击的按钮添加 'active' 类
btn.classList.add('active');
// d. 找到对应 id 的面板，并为其添加 'active' 类
const activePane = document.getElementById(activeTabId);
if (activePane) {
activePane.classList.add('active');
}
});
});
});
</script>
</body>
</html>
使用 jQuery 库实现（更简洁）
如果你已经在项目中使用了 jQuery，或者喜欢它简洁的语法,这是一个很好的选择。
（图片来源网络，侵删）
特点：
- 代码量更少,选择器强大。
- 需要引入 jQuery 库。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新闻 Tab - jQuery 实现</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* CSS 样式与方案二完全相同 */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; }
.container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { text-align: center; }
.tab-nav { display: flex; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.tab-nav button { flex: 1; padding: 12px 20px; border: none; background: none; cursor: pointer; text-align: center; color: #666; font-size: 16px; transition: all 0.3s ease; position: relative; }
.tab-nav button:hover { background-color: #f9f9f9; color: #007bff; }
.tab-nav button.active { color: #007bff; }
.tab-nav button.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #007bff; }
.tab-content { padding: 20px 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.news-item { padding: 15px 0; border-bottom: 1px solid #eee; }
.news-item:last-child { border-bottom: none; }
.news-item h3 { margin: 0 0 5px 0; }
.news-item a { color: #007bff; text-decoration: none; }
.news-item a:hover { text-decoration: underline; }
.news-meta { font-size: 0.9em; color: #888; }
</style>
</head>
<body>
<div class="container">
<h1>每日新闻</h1>
<div class="tab-nav">
<button class="tab-btn active" data-tab="tab1">国内新闻</button>
<button class="tab-btn" data-tab="tab2">国际新闻</button>
<button class="tab-btn" data-tab="tab3">科技新闻</button>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<!-- 内容省略，与方案二相同 -->
</div>
<div id="tab2" class="tab-pane">
<!-- 内容省略，与方案二相同 -->
</div>
<div id="tab3" class="tab-pane">
<!-- 内容省略，与方案二相同 -->
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 为所有 class 为 tab-btn 的按钮绑定点击事件
$('.tab-btn').on('click', function() {
// $(this) 指代当前被点击的按钮
// 1. 移除所有按钮和面板的 active 类
$('.tab-btn').removeClass('active');
$('.tab-pane').removeClass('active');
// 2. 给当前点击的按钮添加 active 类
$(this).addClass('active');
// 3. 获取 data-tab 属性的值
var activeTabId = $(this).data('tab');
// 4. 找到对应 id 的面板，并添加 active 类
$('#' + activeTabId).addClass('active');
});
});
</script>
</body>
</html>
使用现代前端框架（如 Vue.js）
对于构建复杂的应用程序，使用 Vue 或 React 这样的框架是更好的选择，这里以 Vue 3 为例。
特点：
- 数据驱动视图,代码更优雅。
- 组件化开发,易于维护和扩展。
- 需要构建工具或引入 Vue 的 CDN 版本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新闻 Tab - Vue 实现</title>
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
/* CSS 样式与方案二完全相同 */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; }
.container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { text-align: center; }
.tab-nav { display: flex; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.tab-nav button { flex: 1; padding: 12px 20px; border: none; background: none; cursor: pointer; text-align: center; color: #666; font-size: 16px; transition: all 0.3s ease; position: relative; }
.tab-nav button:hover { background-color: #f9f9f9; color: #007bff; }
.tab-nav button.active { color: #007bff; }
.tab-nav button.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #007bff; }
.tab-content { padding: 20px 0; }
.news-item { padding: 15px 0; border-bottom: 1px solid #eee; }
.news-item:last-child { border-bottom: none; }
.news-item h3 { margin: 0 0 5px 0; }
.news-item a { color: #007bff; text-decoration: none; }
.news-item a:hover { text-decoration: underline; }
.news-meta { font-size: 0.9em; color: #888; }
</style>
</head>
<body>
<div id="app">
<div class="container">
<h1>每日新闻</h1>
<!-- Tab 导航，使用 v-for 循环生成 -->
<div class="tab-nav">
<button
v-for="tab in tabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="{ active: activeTab === tab.id }"
>
{{ tab.name }}
</button>
</div>
<!-- Tab 内容，使用 v-if 或 v-show 切换 -->
<div class="tab-content">
<!-- 国内新闻 -->
<div v-if="activeTab === 'tab1'" class="tab-pane active">
<div class="news-item" v-for="news in domesticNews" :key="news.title">
<h3><a href="#">{{ news.title }}</a></h3>
<p class="news-meta">{{ news.meta }}</p>
</div>
</div>
<!-- 国际新闻 -->
<div v-if="activeTab === 'tab2'" class="tab-pane active">
<div class="news-item" v-for="news in internationalNews" :key="news.title">
<h3><a href="#">{{ news.title }}</a></h3>
<p class="news-meta">{{ news.meta }}</p>
</div>
</div>
<!-- 科技新闻 -->
<div v-if="activeTab === 'tab3'" class="tab-pane active">
<div class="news-item" v-for="news in techNews" :key="news.title">
<h3><a href="#">{{ news.title }}</a></h3>
<p class="news-meta">{{ news.meta }}</p>
</div>
</div>
</div>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
// 当前激活的 Tab ID
activeTab: 'tab1',
// Tab 列表数据
tabs: [
{ id: 'tab1', name: '国内新闻' },
{ id: 'tab2', name: '国际新闻' },
{ id: 'tab3', name: '科技新闻' }
],
// 新闻数据
domesticNews: [
{ title: '我国成功发射新型遥感卫星，用于环境监测', meta: '2025年10月27日 10:30 来源：新华社' },
{ title: '全国多地迎来降温，请注意添衣保暖', meta: '2025年10月27日 09:15 来源：中国天气网' },
{ title: '第三季度GDP同比增长4.9%，经济持续恢复向好', meta: '2025年10月26日 14:00 来源：国家统计局' }
],
internationalNews: [
{ title: '联合国气候变化大会在迪拜开幕', meta: '2025年10月27日 11:00 来源：路透社' },
{ title: '美联储宣布维持利率不变，市场反应积极', meta: '2025年10月26日 22:30 来源：彭博社' },
{ title: '欧洲议会通过新法案，加强对大型科技公司的监管', meta: '2025年10月25日 16:45 来源：欧洲新闻台' }
],
techNews: [
{ title: '苹果发布新款MacBook Pro，搭载M3系列芯片', meta: '2025年10月30日 01:00 来源：The Verge' },
{ title: 'OpenAI发布Sora模型，能生成长达1分钟的高清视频', meta: '2025年10月23日 20:00 来源：AI科技评论' },
{ title: '特斯拉推出全新自动驾驶测试版，城市街道导航能力增强', meta: '2025年10月20日 18:30 来源：TechCrunch' }
]
}
}
}).mount('#app');
</script>
</body>
</html>
总结与选择建议
| 方案 | 技术栈 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 纯 CSS | HTML, CSS | 简单、快速、无 JS 依赖 | 页面会刷新/跳转，体验不连贯 | 静态网站、SEO 优化的简单页面 |
| 原生 JS | HTML, CSS, Vanilla JS | 灵活、无依赖、性能好 | 代码量比 jQuery/Vue 多，DOM 操作繁琐 | 简单的交互页面、不想引入库的项目 |
| jQuery | HTML, CSS, jQuery | 代码简洁、选择器强大 | 依赖 jQuery 库、已非主流 | 旧项目维护、已引入 jQuery 的环境 |
| Vue.js | HTML, CSS, Vue.js | 数据驱动、组件化、代码优雅 | 需要学习框架、有轻微性能开销 | 单页面应用、需要复杂交互和状态管理的项目 |
对于大多数现代网页开发，方案二（原生 JS） 是一个非常好的平衡点，它既提供了流畅的单页体验，又不引入任何外部依赖，而如果你正在构建一个大型应用，方案四（Vue.js） 则是更专业、更具扩展性的选择。
（图片来源网络，侵删）
