подскажите, хочу сделать вкладки.
нашел такой код:
<!DOCTYPE html>
<html>
<head>
<style>
.tabs {
position: relative;
margin: 0 auto;
width: 800px;
padding-top:30px;
}
.tabs .labels{
margin:0 auto;
width:600px;
border:1px solid #dadada;
height:62px;
}
.tabs label {
color: #555;
cursor: pointer;
display: block;
float: left;
width: 199px;
padding:20px 0;
vertical-align:middle;
position: relative;
text-align: center;
border-right:1px solid #dadada;
font-size:18px;
}
.tabs label:last-child{
border-right:0px solid;
}
.tabs input {
position: absolute;
left: -9999px;
}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2,
#tab_3:checked ~ #tab_l3 {
background: #dadada;
border-color: #fff;
top: 0;
z-index: 3;
}
.tabs_cont {
background: #fff;
position: relative;
z-index: 2;
top:30px;
height: 230px;
}
.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;
}
</style>
</head>
<body>
<section class="tabs">
<input id="tab_1" type="radio" name="tab" checked />
<input id="tab_2" type="radio" name="tab" />
<input id="tab_3" type="radio" name="tab" />
<div class="labels">
<label for="tab_1" id="tab_l1">11</label>
<label for="tab_2" id="tab_l2">2222</label>
<label for="tab_3" id="tab_l3">3333</label>
</div><!--labels-->
<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>
</body>
</html>
Вроде все получилось, но не могу никак изменить цвет выбранной вкладки.
надо сделать бэкграунд в checked.
Тоесть
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2,
#tab_3:checked ~ #tab_l3 {
background: #dadada;
border-color: #fff;
top: 0;
z-index: 3;
}
не работает. подскажите, пожалуйста, что делать?