CSS3

» CSS,
   CSS3

, ! , :). , .

, . Javascript HTML CSS3.


input CSS :checked. .

HTML
<section class="tabs">
	<input id="tab_1" type="radio" name="tab" checked="checked" />
	<input id="tab_2" type="radio" name="tab" />
	<input id="tab_3" type="radio" name="tab" />
	
	<label for="tab_1" id="tab_l1">Tab One</label>
	<label for="tab_2" id="tab_l2">Tab Two</label>
	<label for="tab_3" id="tab_l3">Tab Three</label>
	<div style="clear:both"></div>

	<div class="tabs_cont">
		<div id="tab_c1">Content of first tab</div>
		<div id="tab_c2">Content of first second</div>
		<div id="tab_c3">Content of third tab</div>
	</div>
</section>


- . checked="checked", . , label. .tabs_cont . .

CSS

.tabs {
	position: relative;
	margin: 0 auto;
	width: 800px;
}
.tabs label {
	color: #555;
	cursor: pointer;
	display: block;
	float: left;
	width: 150px;
	height: 45px;
	line-height: 45px;
	position: relative;
	top: 2px;
	text-align: center;
}

.tabs input {
	position: absolute;
	left: -9999px;
}

#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
	background: #fff;
	border-color: #fff;
	top: 0;
	z-index: 3;
}

.tabs_cont {
	background: #fff;
	position: relative;
	z-index: 2;
	height: 230px;
}


label , input' . :checked. , #tab_1 ( -), #tab_l1 . . . .

. , .

.tabs_cont > div {
	position: absolute;
	left: -9999px;
	top: 0;
	opacity: 0;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
	position: static;
	left: 0;
	opacity: 1;
}


. display: none, , . , , 0, 1. transition, . :checked -.

! . , . .



dle 10 - 10.1CSS3-Tabs.zip [36,03 Kb] (c: 3931) dle 10.1