实现纯 CSS 选项卡的一个简单方法是使用单选按钮！
关键是风格labels附加到相应的按钮。单选按钮本身是隐藏的，有一点绝对定位，位于屏幕一侧。
基本的html结构是：
div#holder
input[type="radio"]
div.content-holder
label
div.tab-content (all your tab content goes here)
input[type="radio"]
... keep repeating
关键在于选择器。我们将设计样式input[type="radio"]按钮与
input[type="radio"] {
position: absolute;
left: -100%;
top: -100%;
height: 0;
display: none;
}
如上所述，这会将它们提升到屏幕一侧。但是我们如何点击它们呢？幸运的是，如果您的目标是label，它可以帮你点击输入！
<label for="radioInputId1">tab title</label>
然后我们设置实际标签的样式（为了简洁起见，我将省略美学样式）：
input[type="radio"] + div.content-holder > label {
display: inline-block;
float: left;
height: 35px;
width: 33%; /* or whatever width you want */
}
现在我们的标签应该看起来像顶部的“选项卡”div#holder。但所有这些内容又如何呢？好吧，我们希望默认情况下将其全部隐藏，因此我们可以使用以下选择器来定位它：
input[type="radio"] + div.content-holder > div.tab-content {
display: none;
position: absolute;
top: 65px; /* this depends on your label height */
width: 100%;
}
上面的 CSS 是让它工作所需的最小 CSS。除了display: none;当div实际显示。但这在选项卡中没有显示任何内容，所以……现在怎么办？
input[type="radio"]:checked + div.content-holder > div.tab-content {
display: block;
}
上述工作的原因是因为:checked伪类。自从labels 附加到特定的单选按钮，它们会触发:checked单击时。这会自动关闭所有其他单选按钮。因为我们已经将所有内容封装在一个div.content-holder，我们可以使用下一个同级 CSS 选择器，+，以确保我们仅针对特定选项卡。 （尝试使用~看看会发生什么！）
这是一个fiddle http://jsfiddle.net/Luxelin/xsr96u3m/3/，对于那些不喜欢堆栈片段的人来说，这是一个堆栈片段，对于那些喜欢堆栈片段的人：
#holder {
border: solid 1px black;
display: block;
height: 500px;
position: relative;
width: 600px;
}
p {
margin: 5px 0 0 5px;
}
input[type="radio"] {
display: none;
height: 0;
left: -100%;
position: absolute;
top: -100%;
}
input[type="radio"] + div.content-holder > label {
background-color: #7BE;
border-radius: 2px;
color: #333;
display: inline-block;
float: left;
height: 35px;
margin: 5px 0 0 2px;
padding: 15px 0 0 0;
text-align: center;
width: 33%;
}
input[type="radio"] + div.content-holder > div {
display: none;
position: absolute;
text-align: center;
top: 65px;
width: 100%;
}
input[type="radio"]:checked + div.content-holder > div {
display: block;
}
input[type="radio"]:checked + div.content-holder > label {
background-color: #B1CF6F;
}
img {
left: 0;
margin: 15px auto auto auto;
position: absolute;
right: 0;
}
<div id="holder">
<input type="radio" name="tabs" value="1" id="check1" checked>
<div class="content-holder">
<label for="check1">one</label>
<div class="tab-content">
<p>All my content for the first tab goes here.</p>
</div>
</div>
<input type="radio" name="tabs" value="2" id="check2">
<div class="content-holder">
<label for="check2">two</label>
<div class="tab-content">
<h2>You can put whatever you want in your tabs!</h2>
<p>Any content, anywhere!</p>
<p>
Remember, though, they're absolutely positioned.
This means they position themselves relative to
their parent, div#holder, which is relatively positioned
</p>
</div>
</div>
<input type="radio" name="tabs" value="3" id="check3">
<div class="content-holder">
<label for="check3">three</label>
<div class="tab-content">
<p>
And maybe I want a picture of a nice cat in my third tab!
</p>
<img src="https://i.stack.imgur.com/Bgaea.jpg">
</div>
</div>
</div>
我设计的选项卡确实相当基本。如果您希望它们“包裹”到内容中，您可以通过一些额外的 CSS 工作来做到这一点。
