我正在使用以下网站中的代码:http://calebogden.com/css-tabs/,它允许我创建一些CSS标签,但是,只有当您将鼠标悬停在其中一个标签上时才能看到内容,理想情况下我希望内容在没有人必须这样做的情况下可见。
代码是:
<!-- HTML -->
<div id="content" role="main">
<div id="tabs">
<nav class="tabs">
<a href="#">About Scamper</a>
<section class="tabs-content">
Scamper is the coolest.
</section>
<a href="#">His Anatomy</a>
<section class="tabs-content">
Partly because he's a penguin.
</section>
<a href="#">Life Achievements</a>
<section class="tabs-content">
But also he had a movie made about him.
</section>
<a href="#">More Info</a>
<section class="tabs-content">
These tabs sure are great.
</section>
</nav>
</div>
</div>
<!-- css -->
#content { padding: 25px; background: #FFF; }
#tabs {
border: 1px solid #DEDEDE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 205px;
position: relative;
overflow: hidden;
}
.tabs-content {
padding: 25px;
height: 120px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.tabs {
overflow: hidden;
background: #e1e1e1;
background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1));
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 1px 0 #FFF inset;
-moz-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
display: block;
float: left;
font: 15px/35px Arial, Helvetica, Sans-serif;
padding: 0 20px 0 40px;
color: #999;
text-shadow: 0 1px 0 #FFF;
border-left: solid 1px rgba(0,0,0,0.05);
border-right: solid 1px rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.tabs a:first-child {
border-left-width: 0;
}
.tabs a:last-child {
border-right-width: 0;
}
.tabs a:after {
content: '✔';
position: absolute;
top: 0;
left: 10px;
line-height: 21px;
font-size: 10px;
width: 21px;
text-align: center;
margin: 7px 10px 5px 0;
background: #000;
font-size: 12px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
background: #bdbdbd;
background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd));
-webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
-moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset;
text-shadow: 0 1px 0 #999;
color: #ffffff;
}
.tabs a:hover {
background: #FFF;
border-left-color: #CCC;
}
.tabs a:hover:after {
background: #038bd5;
background: -moz-linear-gradient(center top , #2dc3fc, #038bd5);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5));
text-shadow: 0 1px 0 #096c9e;
-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
-moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85);
box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
}
.tabs a:hover + .tabs-content {
display: block;
}
.tabs-content:hover {
display: block;
}
</style>
根据脚本中提供的代码,任何人都可以帮助我在CSS中编辑需要编辑的内容吗?
答案 0 :(得分:2)
代码的更新版本允许您单击选项卡以查看内容。点击后,内容仍然可见。
http://calebogden.com/advanced-css-tabs/
相关摘录:
由于我们将使用目标选择器,我们需要添加 ID是链接的[sic],也是HREF属性的选择器。这个 将允许我们通过它的目标选择选项卡,它是下一个兄弟 从同样的方法。链接的新HTML将如下所示:
<a id="tab1" href="#tab1">Scamper</a>
修改HTML后,现在我们需要做的就是将选择器更改为:hover to:target。
.tabs a:target { declarations } .tabs a:target:after { declarations } .tabs a:target + section.tabs-content { declarations }
这是一个显示:target
选择器的工作小提琴:http://jsfiddle.net/8BKtz/
要选择初始标签,您可以将哈希值放入网址。
@ matthias.p显示了一个更好的解决方案,可以通过使用更智能的选择器来选择初始选项卡。然而,所有解决方案(包括原始代码和我的解决方案)都依赖于较新的CSS选择器,因此它们将在IE8及更低版本中部分或完全中断,即使添加了像Modernizr这样的库来支持使用的HTML 5元素(如section
)。
目前,我可能会使用一段JavaScript代码来使代码更加广泛兼容。很高兴知道将来可以使用纯CSS解决方案。
这是一个使用JS实现更高兼容性的完整解决方案:http://jsfiddle.net/hN4S3/1/
答案 1 :(得分:2)
通过使用:target
选择器,这是可能的。但是所有其他答案的问题在于,首先,没有选择选项卡,但通常已经选择了第一个选项卡,并且根本没有选择选项卡的状态通常不存在。以下是我的标签导航方式:
http://jsfiddle.net/UejbP/1/
如您所见,第一个选项卡是自动选择的 - 没有任何javascript。
答案 2 :(得分:0)
.tabs-content {
padding: 25px;
height: 120px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none; //REMOVE THIS LINE
}
如果您希望内容在任何时候都可以看到,这听起来就像您希望的那样,那么只删除该行,您就可以了:)