仅用CSS实现页面加载时默认打开第一个Tab（Link 1）

可以通过CSS伪类组合实现需求，既保留点击切换功能，又让第一个Tab内容默认显示，无需JavaScript。

方案一（现代浏览器兼容，简洁写法） #

利用:has()选择器检测容器内是否有被选中的Tab，配合:target控制显示状态：

修改后的CSS代码

/* 默认隐藏所有Tab内容 */
.tab div {
  display: none;
}

/* 默认显示第一个Tab内容 */
.tab div:first-of-type {
  display: block;
}

/* 当有任意Tab被选中时，隐藏所有Tab内容 */
.tab:has(:target) div {
  display: none;
}

/* 显示被选中的Tab内容 */
.tab div:target {
  display: block;
}

HTML代码无需修改

<div class="tab">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
</div>

原理说明

1. 初始状态下，所有Tab内容被隐藏，通过div:first-of-type强制显示第一个Tab内容；
2. 点击任意Tab链接时，对应的div会被:target选中，此时.tab:has(:target)会触发，隐藏所有Tab内容，再通过div:target单独显示当前选中的内容。

方案二（兼容旧浏览器，无:has()依赖） #

如果需要兼容不支持:has()的浏览器，可以调整HTML结构，利用通用兄弟选择器实现：

修改后的HTML代码

<div class="tab">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <div id="link2">
    <h3>Content to Link 2</h3>
    <h4>Great success!</h4>
  </div>
  <div id="link3">
    <h3>Content to Link 3</h3>
    <p>Yeah!</p>
  </div>
  <!-- 将第一个Tab内容移到最后 -->
  <div id="link1">
    <h3>Content to Link 1</h3>
    <p>Hello World!</p>
  </div>
</div>

修改后的CSS代码

/* 默认隐藏所有Tab内容 */
.tab div {
  display: none;
}

/* 默认显示最后一个（原第一个）Tab内容 */
.tab div:last-of-type {
  display: block;
}

/* 显示被选中的Tab内容 */
.tab div:target {
  display: block;
}

/* 隐藏选中Tab之后的所有内容 */
.tab div:target ~ div {
  display: none;
}

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