所以我想创建一个仅使用 CSS 的选项卡系统。
到目前为止我所拥有的有效,但我不知道如何使一个选项卡默认可见。
选项卡:
<section class="tabs">
<ul>
<li><a href="#tab1">1</a></li>
<li><a href="#tab2">2</a></li>
<li><a href="#tab3">3</a></li>
</ul>
<section id="tab1"> content for 1... </section>
<section id="tab2"> content for 2... </section>
<section id="tab3"> content for 3... </section>
</section>
和CSS(最重要的部分):
.tabs section{
display: none;
}
.tabs section:target{
display: block;
}
所以我如果我设置section:first-child
阻止(默认情况下第一个选项卡应该可见),然后如果 URL 中有锚点,我会得到两个可见部分:第一个选项卡和目标选项卡...
我怎样才能克服这个问题?
好吧,如果您将默认设置为最后一个选项卡(section:last-child
),那么我认为这可行:
.tabs section,
.tabs section:target ~ section {
display: none;
}
使用通用兄弟选择器~
要求该元素位于其目标同级元素之前,因此这是last-child
而不是first-child
要求。
编辑:2011 年 12 月 11 日,我确实找到了一种方法让你突出你的a
标签处于活动状态!假设它满足您的特定应用。以下是一些用于概念验证的简单修改代码(仅在 FF 中进行了测试):
HTML
<section class="tabs">
<ul class="nav">
<li><a href="#tab1">1</a></li>
<li><a href="#tab2">2</a></li>
<li><a href="#tab3">3</a></li>
</ul>
<section id="tab2"><div class="tabActive"></div> content for 2... </section>
<section id="tab3"><div class="tabActive"></div> content for 3... </section>
<section id="tab1"><div class="tabActive"></div> content for 1... </section>
</section>
CSS
.nav {
position: relative;
z-index: 2;
margin: 10px .5em 0;
}
.nav li {
padding: .5em;
width: 2em;
text-align: center;
float: left;
}
.tabs section,
.tabs section:target ~ section {
display: none;
}
.tabs section:target,
.tabs section:last-child {
display: block;
clear: left;
margin: 0 .5em;
min-width: 300px; /* for show only */
min-height: 200px; /* for show only */
border: 1px solid black;
position: relative;
z-index: 1;
padding: 10px;
}
.tabActive { /* set for tab 1 */
width: 2em;
height: 2em;
position: absolute;
top: -2em;
left: .5em;
border: 1px solid black;
border-bottom: transparent;
background-color: inherit;
margin-top: -1px; /* top border height */
margin-left: -1px; /* left border width */
}
#tab1 {background-color: cyan;}
#tab2 {background-color: yellow;}
#tab3 {background-color: pink;}
#tab2 .tabActive {left: 3.5em;}
#tab3 .tabActive {left: 6.5em;}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)