Html 仅css3选项卡预选选项卡
我试图使用:target伪类创建一个仅限CSS3的选项卡 HTML: 小提琴: 一切都完成了Html 仅css3选项卡预选选项卡,html,css,tabs,pseudo-class,Html,Css,Tabs,Pseudo Class,我试图使用:target伪类创建一个仅限CSS3的选项卡 HTML: 小提琴: 一切都完成了 仅面临一个问题:如果未单击任何选项卡且目标为空,则最初加载时,该选项卡不会突出显示:(您可以使用单选按钮和:选中类来创建该选项卡 它不使用:target,因此不会有任何页面跳转 正如您在下面的代码示例中所看到的,每个选项卡都包含单选按钮(用于功能),该按钮通过display:none隐藏,标签为选项卡和内容div HTML <div class="tabs_wrapper"> <
仅面临一个问题:如果未单击任何选项卡且目标为空,则最初加载时,该选项卡不会突出显示:(您可以使用单选按钮和
:选中类来创建该选项卡
它不使用:target
,因此不会有任何页面跳转
正如您在下面的代码示例中所看到的,每个选项卡都包含单选按钮(用于功能),该按钮通过display:none
隐藏,标签为选项卡和内容div
HTML
<div class="tabs_wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>
<div class="content">
<p>This content appears on tab 1.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>
<div class="content">
<p>This content appears on tab 2.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>
<div class="content">
<p>This content appears on tab 3.</p>
</div>
</div>
</div>
可能是《Hi ghosthunter》的副本,看起来您刚从中复制了大部分代码。请编辑您的帖子并将其归属给作者,好吗?再见!
article.tabs section:target h2
{
color: #f2f2f2;
background-color:#b8b63e;
}
article.tabs section:target{
z-index: 2;
}
<div class="tabs_wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab 1</label>
<div class="content">
<p>This content appears on tab 1.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab 2</label>
<div class="content">
<p>This content appears on tab 2.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab 3</label>
<div class="content">
<p>This content appears on tab 3.</p>
</div>
</div>
</div>
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}