As CSS3 has started gaining more popularity and more browsers are starting to support it, many common interactions that you would expect from a website that were created using JavaScript are now being replaced by pure CSS solutions. Today I’ll show you how to create an animated content tab using only CSS.
越来越多人开始关注CSS3,同时越来越多的的浏览器开始支持CSS3,之前很多网页的交互需要javascript和css的配合，现在都可以不需要用javascript了。今天，我将展示如何利用css3制作带动画效果的选项卡。
Disclaimer: The purpose of this post is to show you the possibilities of CSS3. The content may or may not be practical to use in real life.
免责声明：这篇文章的企图是向你展示css3的能力，而css3也许在实际应用中并不实用。（译者补充：可能很多浏览器对css3不是很友好，或者兼容）
Creating Content Tabs with Pure CSS
HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<
ul
class
=
"tabs"
>
<
li
>
<
input
type
=
"radio"
checked
name
=
"tabs"
id
=
"tab1"
>
<
label
for
=
"tab1"
>tab 1</
label
>
<
div
id
=
"tab-content1"
class
=
"tab-content animated fadeIn"
>
...
</
div
>
</
li
>
<
li
>
<
input
type
=
"radio"
name
=
"tabs"
id
=
"tab2"
>
<
label
for
=
"tab2"
>tab 2</
label
>
<
div
id
=
"tab-content2"
class
=
"tab-content animated fadeIn"
>
...
</
div
>
</
li
>
<
li
>
<
input
type
=
"radio"
name
=
"tabs"
id
=
"tab3"
>
<
label
for
=
"tab3"
>tab 3</
label
>
<
div
id
=
"tab-content3"
class
=
"tab-content animated fadeIn"
>
...
</
div
>
</
li
>
</
ul
>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
body, html {
height
:
100%
;
margin
:
0
;
-webkit-font-smoothing: antialiased;
font-weight
:
100
;
background
:
#aadfeb
;
text-align
:
center
;
font-family
:
helvetica
;
}
.tabs input[type=radio] {
position
:
absolute
;
top
:
-9999px
;
left
:
-9999px
;
}
.tabs {
width
:
650px
;
float
:
none
;
list-style
:
none
;
position
:
relative
;
padding
:
0
;
margin
:
75px
auto
;
}
.tabs li{
float
:
left
;
}
.tabs label {
display
:
block
;
padding
:
10px
20px
;
border-radius:
2px
2px
0
0
;
color
:
#08C
;
font-size
:
24px
;
font-weight
:
normal
;
font-family
:
'Lily Script One'
, helveti;
background
: rgba(
255
,
255
,
255
,
0.2
);
cursor
:
pointer
;
position
:
relative
;
top
:
3px
;
-webkit-transition:
all
0.2
s ease-in-out;
-moz-transition:
all
0.2
s ease-in-out;
-o-transition:
all
0.2
s ease-in-out;
transition:
all
0.2
s ease-in-out;
}
.tabs label:hover {
background
: rgba(
255
,
255
,
255
,
0.5
);
top
:
0
;
}
[id^=tab]:checked + label {
background
:
#08C
;
color
:
white
;
top
:
0
;
}
[id^=tab]:checked ~ [id^=tab-content] {
display
:
block
;
}
.tab-content{
z-index
:
2
;
display
:
none
;
text-align
:
left
;
width
:
100%
;
font-size
:
20px
;
line-height
:
140%
;
padding-top
:
10px
;
background
:
#08C
;
padding
:
15px
;
color
:
white
;
position
:
absolute
;
top
:
53px
;
left
:
0
;
box-sizing: border-box;
-webkit-animation-duration:
0.5
s;
-o-animation-duration:
0.5
s;
-moz-animation-duration:
0.5
s;
animation-duration:
0.5
s;
}
|
First off, in order to replicate the functionality of JavaScript, we need to find a way to let the CSS know that the user has clicked the button. With JavaScript, we can simply add a class name on click but since we are not going to use JavaScript, we need to hack our way through this. What I did is I used a hidden radio button which is linked to a label tag through rel attribute. The label will act as a button and when you click the label, the label will trigger a “checked” attribute of that linked radio button. Now we can target our styles with a :checked selector.
首先，为了重现javascript的功能，我们需要找到一个方法让css知道用户点击的选项卡的按钮。用javascript的话，我们可以轻松在按钮上面添加onclick事件，但是我们现在不打算用javascript，我们需要通过一种特别的方法。我用的是隐藏radio的方法，radio通过 rel 属性（在这里用的是id）关联到label标记。这时label标记的行为会像一个真实的按钮一样，当你点击label时，label将触发与之关联的radio的的"checked"属性。于是我们可以target our styles with a :checked 选择器。
From the HTML markup, you can see that I have the radio button, the label and the container at the same level. There’s a reason for this. With the help of an awesome CSS sibling combinator (~) we can have one selector triggering another same-level selector without even having it nested together. This allows us to have any radio button with a check triggering any container to appear so that it replicates the behavior of a normal content tab created with JavaScript.
从我们的HTML标记中，你可以看到我们的radio,label和container在同一个DOM层次。这是有原因的，通过css sibling combinator(~)，我们可以选择radio,label,container中的其中一个，用来触发同一层次其它节点（？），这允许我们让被点击的radio触发同一层次的container显示，这就重现了原来通过javascript来创建的tab。
In the demo, I have also included a CSS animation library created by Dan Eden to add some animation effects when the tab content appears.
在这里的demo中，我同时加入了一个由Dan Eden创建的css的动画效果库，这样当我们的tab对应的内容出现时，我们会有动画的效果。
Conclusion
Now you have a beautiful animated tab content for your website without even touching any JavaScript. Let me know what you think about this approach in the comments below.
结论：
现在你就拥有了一个不包含任何javascript的漂亮的含动画的tab，你可以在下面留言，告诉我你对这种方法的思考。
文章来源：http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
扫一扫
1551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
