2
我想在一个页面上实现两组仅用于CSS的选项卡组。但是，当我单击某个组中的某些选项卡时，其他选项卡也会变为活动状态。以下是我的代码如下。我希望能够在页面上放置尽可能多的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;
}
我想我明白。问题是只有一个目标可以在页面上处于活动状态。不超过一个。 – 2014-10-10 07:31:20
Sass mixin会解决这个问题吗？ – 2014-10-10 09:02:14