仅包含css的选项卡
仅包含css的选项卡
提问于 2018-06-13 07:25:18
我正在尝试建立一个纯css标签。for属性的值必须与控件的id相匹配我使用伪class :checked来指向我想要显示的div，但问题是当我单击两三个选项卡时，什么也不会出现
我使用：
tabs input[type="radio"]:checked + h2 + .tab {
display: block;
}要在单击时显示div
/**
* Tabs
*/
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs h2 {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.2rem;
cursor: pointer;
background: #90CAF9;
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 + h2 {
background: #fff;
}
.tabs input[type="radio"]:checked + h2 + .tab {
display: block;
}
/**
* Generic Styling
*/
body {
background: #eee;
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%;
}<div class="tabs">
<label for="tabone"></label>
<input type="radio" name="tabs" id="tabone" checked="checked">
<h2>Tab One</h2>
<div class="tab">
<h1>Tab One 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>
<label for="tabtwo"></label>
<input type="radio" name="tabs" id="tabtwo">
<h2>Tab Two</h2>
<div class="tab">
<h1>Tab Two 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>
<label for="tabthree"></label>
<input type="radio" name="tabs" id="tabthree">
<h2>Tab Three</h2>
<div class="tab">
<h1>Tab Three Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-13 07:45:18
这是可行的：
/**
* Tabs
*/
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs h2 {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.2rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
transition: background ease 0.2s;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked+label h2 {
background: #fff;
}
input[type="radio"]:checked~.tab {
display: block;
}
input[type="radio"]:checked~.tab~.tab {
display: none;
}
/**
* Generic Styling
*/
body {
background: #eee;
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%;
}<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone"><h2>Tab One</h2></label>
<div class="tab">
<h1>Tab One 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"><h2>Tab Two</h2></label>
<div class="tab">
<h1>Tab Two 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"><h2>Tab Three</h2></label>
<div class="tab">
<h1>Tab Three Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50827166
复制相关文章
相似问题