文章目录
https://webdevtrick.com/pure-css-tabs-responsive/
大部分的选项卡都是使用JavaScript或Jquery实现的，但今天我分享的是
纯CSS设计的响应式选项卡。这个程序完全没有JavaScript，也没有使用其他JS框架。不像是其他“实验性质”的同类功能模块，这个模块完全可以在你的网站上使用它，让你的网站看起来清新简洁，且拥有良好的UI和UX。
这个模块是完全静态的，所以你可以快速切换标签。
纯CSS选项卡模块源码
在分享源码之前，我想先说一下这个模块的原理。这个模块只使用了
<input type="radio"> 作为存储选项卡位置，并使用
input[type="radio"]:checked来显示或隐藏对应的选项卡。基本上，当用户点击一个选项卡时，对应的input将被选中，那么display就变成block，否则就是none。这就是这个CSS选项卡模块的全部秘密。
你只需要创建2个文件来创建这个程序。一个是HTML文件，一个是CSS文件。按照步骤操作即可。
index.html
创建一个名为“ index.html”的HTML文件，并将这些代码放在里面。
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Pure CSS tabs | Webdevtrick.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 模块开始 -->
<div class="tabs">
<!-- 单个选项卡开始 -->
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">First Tab</label>
<div class="tab">
<h1>First Tab Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- 单个选项卡结束 -->
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Second Tab</label>
<div class="tab">
<h1>Second Tab Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Third Tab</label>
<div class="tab">
<h1>Third Tab Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- 模块结束 -->
</body>
</html>
style.css
然后创建一个名为'
style.css'的CSS文件，用于赋予这个模块生命。在文件中放入这些代码。
/** code by webdevtrick ( https://webdevtrick.com ) */
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.2rem;
cursor: pointer;
background: #3CC0F8;
font-weight: bold;
transition: background ease 0.2s;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
@media (max-width: 45em) {
.tabs .tab,
.tabs label {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
/* 以下样式用于展示，非模块的一部分 */
body {
background: #333;
min-height: 100vh;
box-sizing: border-box;
padding-top: 10vh;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
line-height: 1.5;
max-width: 60rem;
margin: 0 auto;
font-size: 112%;
}
就是这样。现在你已经成功创建了一个具有响应式设计的纯CSS标签程序。如果你有任何疑问或问题在下面评论。