html div 做成页签,纯CSS实现页签切换效果
时间: 2023-11-28 16:49:59 浏览: 39
可以使用纯CSS实现页签切换效果,具体方法如下:
HTML结构:
```
<div class="tabs">
<div class="tab">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">Tab 1</label>
<div class="tab-content">Tab 1 Content</div>
</div>
<div class="tab">
<input type="radio" name="tab" id="tab2">
<label for="tab2">Tab 2</label>
<div class="tab-content">Tab 2 Content</div>
</div>
<div class="tab">
<input type="radio" name="tab" id="tab3">
<label for="tab3">Tab 3</label>
<div class="tab-content">Tab 3 Content</div>
</div>
</div>
```
CSS样式:
```
.tabs {
display: flex;
justify-content: center;
align-items: center;
}
.tab {
position: relative;
margin: 0 10px;
}
.tab input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab label {
display: block;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.tab input[type="radio"]:checked + label {
background-color: #fff;
}
.tab-content {
display: none;
padding: 10px;
}
.tab input[type="radio"]:checked + label + .tab-content {
display: block;
}
```
以上代码实现了一个简单的页签效果。每个页签都是一个`div.tab`,包含一个`input[type="radio"]`和一个`label`,以及一个`.tab-content`用来显示该页签的内容。当某个页签被选中时,对应的`.tab-content`会显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)