我正在尝试在一个页面上实现两组仅 CSS 选项卡组。但是，当我单击一组中的某些选项卡时，其他选项卡也会变为事件状态。下面是我的代码。我希望能够在页面上放置尽可能多的 css 选项卡组。
html
<div class="row">
<article class="tabs">
<section id="tab2" class="tab_block">
<h2><a href="#tab2">Tab 2</a></h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab3" class="tab_block">
<h2><a href="#tab3">Tab 3</a></h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab1" class="tab_block">
<h2><a href="#tab1">Tab 1</a></h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
<div class="row">
<article class="tabs">
<section id="tab5" class="tab_block">
<h2><a href="#tab5">Tab 2</a></h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab6" class="tab_block">
<h2><a href="#tab6">Tab 3</a></h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab4" class="tab_block">
<h2><a href="#tab4">Tab 1</a></h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
CSS
body {
font: 62.5%/1.5 Georgia,serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
.row {
width: 100%;
float: left;
position: relative;
height: 256px;
}
.tabs {
display: block;
margin: 0 auto;
position: relative;
width: 40em;
}
.tab_block {
position: absolute;
}
.tab_block h2 {
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
left: -1em;
margin: 0;
padding: 0;
position: relative;
top: -2.7em;
width: 6em;
}
.tab_block:first-child h2 {
left: 5.3em;
}
.tab_block:nth-child(2) h2 {
left: 11.6em;
}
.tab_block h2 a {
color: #000;
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 100%;
}
.tab_block div {
box-sizing: border-box;
margin: -5.4em 0 0 -2.1em;
height: 0;
overflow: hidden;
visibilty: hidden;
width: 0;
}
/* last in HTML markup, but visually shown first */
.tab_block:last-child {
background: #FFF;
}
.tab_block:last-child h2 {
background: #FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
left: -1.05em;
}
.tab_block:last-child h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
.tab_block:target,
.tab_block:target h2 {
background-color: #FFF;
}
.tab_block:target h2 {
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
}
.tab_block:target h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:target ~ .tab_block:last-child h2 {
background: #DDD;
border: 0;
box-shadow: none;
left: -1em;
}
.tab_block:target ~ .tab_block:last-child h2:after {
border-bottom: 0;
}
.tab_block:target div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;
height: auto;
visibilty: visible;
width: 40em;
}
.tab_block:target ~ .tab_block div {
border: 0;
box-shadow: none;
height: 0;
overflow: hidden;
padding: 0;
visibilty: hidden;
width: 0;
}
.tab_block h2 {
transition: all 500ms ease;
}
最佳答案
不要使用 :target 选择器，而是使用 :checked 选择器并将 section 元素包装在单选元素的标签中。
JSFIDDLE (更新示例)
这样做，您可以拥有尽可能多的单独组，并且无需使用 javascript。
HTML 结构
-- row
-- tabs
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
CSS
body, html {
margin: 0px;
padding: 0px;
}
body {
font: 62.5%/1.5 Georgia, serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
input[type=radio] {
position: absolute;
visibility: hidden;
pointer-events: none;
z-index: 1;
}
.clear-float {
clear: both;
}
.tab_block ~ .tab_block h2 {
left: 50%;
transform: translate(-50%, -100%);
}
.tab_block ~ .tab_block ~ .tab_block h2 {
left: auto;
right: 0px;
transform: translate(0%, -100%);
}
.row {
width: 40em;
margin: 0 auto;
position: relative;
margin-top: 5em;
}
.tab_block div {
display: none;
background-color: white;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
width: 40em;
}
.tab_block h2 {
position: absolute;
top: 1px;
transform: translateY(-100%);
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
margin: 0;
padding: 0;
width: 6em;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
transition: all 500ms ease;
text-align: center;
cursor: pointer;
border-bottom: none;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
input[type=radio]:checked + label h2 {
background-color: white;
}
:checked + label div {
display: block;
}
关于html - 如何在一个页面上实现两组CSS Tab？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26293962/