<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title></title> <style> :root { --tab-header-height: 30px; --tab-panel-height: 300px; --tab-panel-width: 500px; --border-width: 1px; } .box { width: 60%; height: 500px; } /* tabPanel 绝对定位的父元素 */ .tabs { position: relative; display: flex; } /* 撑开父元素的高度 */ .tab { height: var(--tab-header-height); width: 100px; } /* tabHeader */ .tab span { display: inline-block; box-sizing: border-box; width: 100%; /* 文字垂直居中 */ height: var(--tab-header-height); line-height: var(--tab-header-height); text-align: center; border: 1px solid yellowgreen; /* 都不要左边框，后面单独给第个tabHeader补左边框*/ border-width: var(--border-width); border-left-width: 0; user-select: none; } /* 给第一个 tabHeader (span) 添加左边框 */ .tabs div:first-child span:first-of-type { border-left: 1px solid yellowgreen; } /* 绝对定位层级上浮,后面的 span 会移到input下面 */ .tab input { position: absolute; /* 宽、高占要占满 tabHeader, 方便点击 */ width: 100%; height: 100%; padding: 0; margin: 0; /* 透明 */ opacity: 0; } /* tabPanel要绝对定位， 同时下调z-index层级， 由 tabHeadr 中的 span 的背景色覆盖 tabPanel 的上边框 */ .tab div { position: absolute; left: 0; /* 减去边框的一个像素 */ top: calc(var(--tab-header-height) - 1px); width: var(--tab-panel-width); height: var(--tab-panel-height); line-height: var(--tab-panel-height); border: 1px solid yellowgreen; text-align: center; display: none; z-index: -1; } input:checked+span { background-color: pink; border-bottom: none; } input:checked+span+div { display: block; background-color: pink; } </style> </head> <body> <!-- 设计思路： 1、tabHeader的实现：input绝对定位后脱离正常文档流，其后面的span会上移到input的下面。 2、所有tabPanel的div通过绝对定位到同样的位置，参照的是tabs的div,再根据input的checked状态调整显示。 3、所有tabHeader的span的下边框与tabPanel的上边框重叠，再利用span有背景色遮盖对应的上边框。 --> <div class="box"> <div class="tabs"> <div class="tab"> <input type="radio" name="cbx" checked="checked"> <!-- tabHeader --> <span>tabSheet-1</span> <!-- tabPanel --> <div>tabPanel-1</div> </div> <div class="tab"> <input type="radio" name="cbx"> <span>tabSheet-2</span> <div>tabPanel-2</div> </div> <div class="tab"> <input type="radio" name="cbx"> <span>tabSheet-3</span> <div>tabPanel-3</div> </div> <!-- 后续可加 n 个，不用调整css --> </div> </div> </body> </html>
参照的是tabs的div.
