CSS实现tab选项卡切换

实现Tab选项卡切换可以通过纯CSS完成，主要利用 :target 伪类或 :checked 伪类结合 <input type="radio"> 来实现。以下是两种常见的实现方式：

方法一：使用 :target 伪类

:target 伪类可以匹配当前URL的片段标识符（即 # 后面的部分），通过点击链接切换内容。

HTML结构

html 复制代码

<div class="tab-container">
    <div class="tab-nav">
        <a href="#tab1">Tab 1</a>
        <a href="#tab2">Tab 2</a>
        <a href="#tab3">Tab 3</a>
    </div>
    <div class="tab-content">
        <div id="tab1" class="tab-item">Content 1</div>
        <div id="tab2" class="tab-item">Content 2</div>
        <div id="tab3" class="tab-item">Content 3</div>
    </div>
</div>

CSS样式

css 复制代码

.tab-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tab-nav a {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    background-color: #f1f1f1;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
}

.tab-nav a:hover {
    background-color: #ddd;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.tab-item {
    display: none;
}

.tab-item:target {
    display: block;
}

说明：

点击链接时，URL会改变为 #tab1、#tab2 等，:target 伪类会匹配对应的内容并显示。
其他未匹配的内容会隐藏。

方法二：使用 <input type="radio"> 和 :checked 伪类

通过单选框（<input type="radio">）和 :checked 伪类实现选项卡切换，无需改变URL。

HTML结构

html 复制代码

<div class="tab-container">
    <div class="tab-nav">
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>
    </div>
    <div class="tab-content">
        <input type="radio" name="tabs" id="tab1" checked>
        <div class="tab-item">Content 1</div>

        <input type="radio" name="tabs" id="tab2">
        <div class="tab-item">Content 2</div>

        <input type="radio" name="tabs" id="tab3">
        <div class="tab-item">Content 3</div>
    </div>
</div>

CSS样式

css 复制代码

.tab-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tab-nav label {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    background-color: #f1f1f1;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
}

.tab-nav label:hover {
    background-color: #ddd;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    position: relative;
}

.tab-item {
    display: none;
}

input[type="radio"] {
    display: none;
}

input[type="radio"]:checked + .tab-item {
    display: block;
}

说明：

使用 <label> 标签关联 <input type="radio">，点击标签时会选中对应的单选框。
:checked 伪类用于匹配选中的单选框，显示对应的内容。

方法三：使用Flexbox布局（更简洁的实现）

结合Flexbox布局，可以更简洁地实现选项卡切换。

HTML结构

html 复制代码

<div class="tab-container">
    <div class="tab-nav">
        <input type="radio" name="tabs" id="tab1" checked>
        <label for="tab1">Tab 1</label>

        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Tab 2</label>

        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">Tab 3</label>
    </div>
    <div class="tab-content">
        <div class="tab-item">Content 1</div>
        <div class="tab-item">Content 2</div>
        <div class="tab-item">Content 3</div>
    </div>
</div>

CSS样式

css 复制代码

.tab-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid #ccc;
}

.tab-nav label {
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    background-color: #f1f1f1;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
    cursor: pointer;
}

.tab-nav label:hover {
    background-color: #ddd;
}

.tab-content {
    display: flex;
    overflow: hidden;
}

.tab-item {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    display: none;
}

input[type="radio"] {
    display: none;
}

#tab1:checked ~ .tab-content .tab-item:nth-child(1),
#tab2:checked ~ .tab-content .tab-item:nth-child(2),
#tab3:checked ~ .tab-content .tab-item:nth-child(3) {
    display: block;
}

说明：

使用Flexbox布局实现选项卡内容的动态切换。
通过 :checked 伪类控制显示对应的内容。

总结

:target 方法：简单易用，但会改变URL，适合静态页面。
<input type="radio"> 方法：无需改变URL，适合动态页面。
Flexbox方法：结合布局更灵活，适合复杂场景。

根据项目需求选择合适的方式即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github