纯HTML实现标签页切换
实现原理：
- HTML结构：
- 使用无序列表（
<ul>）创建标签导航。 - 每个标签是一个列表项（
<li>），包含一个链接（<a>）。 - 每个链接指向对应的内容区域（使用锚点链接，如
#tab1）。 - 内容区域使用
<div>元素，并设置相应的id属性。
- 使用无序列表（
- CSS样式：
- 默认隐藏所有内容区域（
display: none;）。 - 使用
:target伪类选择器显示被点击的标签内容（display: block;）。 - 设置标签导航的样式，使其看起来像标签页。
- 默认隐藏所有内容区域（
优点：
- 无需JavaScript：整个功能完全依赖于HTML和CSS，无需编写任何脚本。
- 兼容性好：这种方法在大多数现代浏览器中都能正常工作。
- 性能高：由于不需要执行JavaScript，页面加载和交互都很快。
- SEO友好：所有内容都在HTML中，搜索引擎可以轻松索引。
- 可访问性好：使用proper HTML结构，对屏幕阅读器友好。
缺点：
- 功能限制：无法实现更复杂的交互，如动画效果或动态内容加载。
- URL变化：每次切换标签都会改变URL（添加锚点），可能影响用户体验。
- 初始状态：页面加载时，如果URL没有锚点，所有内容都是隐藏的。
- 样式限制：某些复杂的样式效果可能难以实现。
使用场景： 这种方法适用于简单的、静态的内容展示，特别是在以下情况：
- 网站需要最小化JavaScript使用。
- 目标是创建一个轻量级、快速加载的页面。
- 内容主要是文本或简单的HTML结构。
总结： 使用纯HTML和CSS实现标签页切换是一种简洁有效的方法，特别适合简单的内容展示需求。它提供了良好的性能和兼容性，但功能相对有限。在选择使用这种方法时，需要权衡项目的具体需求和复杂度。对于需要更复杂交互或动态内容的项目，可能还是需要考虑使用JavaScript来实现更丰富的功能。
案例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纯HTML标签页切换</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 20px;}.tab-content {display: none;padding: 20px;border: 1px solid #ccc;border-top: none;}.tab-content:target {display: block;}.tab-nav {list-style-type: none;padding: 0;margin: 0;overflow: hidden;border: 1px solid #ccc;background-color: #f1f1f1;}.tab-nav li {float: left;}.tab-nav li a {display: block;color: black;text-align: center;padding: 14px 16px;text-decoration: none;}.tab-nav li a:hover {background-color: #ddd;}.tab-nav li a:focus {background-color: #ccc;}</style>
</head>
<body><h1>纯HTML标签页切换示例</h1><ul class="tab-nav"><li><a href="#tab1">标签1</a></li><li><a href="#tab2">标签2</a></li><li><a href="#tab3">标签3</a></li></ul><div id="tab1" class="tab-content"><h2>标签1内容</h2><p>这是标签1的内容。使用纯HTML和CSS实现标签切换是可能的！</p></div><div id="tab2" class="tab-content"><h2>标签2内容</h2><p>这是标签2的内容。无需JavaScript，我们依然可以创建交互式界面。</p></div><div id="tab3" class="tab-content"><h2>标签3内容</h2><p>这是标签3的内容。这种方法利用了CSS的:target选择器。</p></div>
</body>
</html>