您现在的位置是：首页 > 一种纯css实现tab切换效果的方案

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

默认 2023-02-13 00:00 共2313人围观 来源：原创
css   tab  
简介很多场景下不希望用JS污染环境，或者无法直接使用JS，比如markdown中，可以使用css来直接实现tab切换，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>
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3cn0udci9ym88

相关文章

文章评论

栏目导航

点击排行

友情链接

官方微信