一种纯css实现tab切换效果的方案

<style>

.tabs-tab-button {

background: #eee;

padding: 8px 15px;

border:1px solid #ccc;

margin-left: -1px;

position: relative;

left: 1px;

font-size: 14px;

line-height: 14px;

cursor: pointer;

border-radius: 2px;

}

.tabs-tabs-header:has(.tabs-tab-button:focus) .tabs-tab-button:not(:focus) {

background: #eee !important;

}

.tabs-tab-button:focus,

.tabs-tab-button.active {

outline: none;

background: white;

border-bottom: 1px solid white;

/* z-index: 2; */

}

.tabs-tab-content{

position: absolute;

top:38px;

left: 0px;

background: white;

right: 0;

bottom: 0;

padding: 0px 20px 20px;

border: 1px solid #ccc;

}

.tabs-tabs-wrapper:has(.tabs-tab-button.active[data-tab="0"]) .tabs-tab-content[data-index="0"],

.tabs-tabs-wrapper:has(but.tabs-tab-buttonton:focus[data-tab="0"]) .tabs-tab-content[data-index="0"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="1"]) .tabs-tab-content[data-index="1"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="2"]) .tabs-tab-content[data-index="2"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="3"]) .tabs-tab-content[data-index="3"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="4"]) .tabs-tab-content[data-index="4"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="5"]) .tabs-tab-content[data-index="5"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="6"]) .tabs-tab-content[data-index="6"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="7"]) .tabs-tab-content[data-index="7"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="8"]) .tabs-tab-content[data-index="8"],

.tabs-tabs-wrapper:has(.tabs-tab-button:focus[data-tab="9"]) .tabs-tab-content[data-index="9"] {

z-index: 2;

}

</style>

<div class="tabs-tabs-wrapper">

<div class="tabs-tabs-header">

<button type="button" class="tabs-tab-button active" data-tab="0">php</button>

<button type="button" class="tabs-tab-button" data-tab="1">java</button>

<button type="button" class="tabs-tab-button" data-tab="2">js</button>

<button type="button" class="tabs-tab-button" data-tab="3">python</button>

<button type="button" class="tabs-tab-button" data-tab="4">c#</button>

</div>

<div class="tabs-tabs-container">

<div class="tabs-tab-content" data-index="0"><pre><code class="lang-">addTopButton("add", "添加", [

"api" =&gt; "/v1/admin/core/config/add" php

])

</code></pre>

</div><div class="tabs-tab-content" data-index="1"><pre><code class="lang-">addTopButton("add", "添加", new HashMap(){{

put("api", "/v1/admin/core/config/add"); java

}})

</code></pre>

</div><div class="tabs-tab-content" data-index="2"><pre><code class="lang-">addTopButton("add", '"添加", [

"api" =&gt; "/v1/admin/core/config/add" js

])

</code></pre>

</div><div class="tabs-tab-content" data-index="3"><pre><code class="lang-">addTopButton("add", "添加", [

'api' =&gt; '/v1/admin/core/config/add' py

])

</code></pre>

</div><div class="tabs-tab-content" data-index="4"><pre><code class="lang-">addTopButton("add", "添加", [

'api' =&gt; '/v1/admin/core/config/add' c#

])

</code></pre>

</div>

</div>

</div>