Jusper1
Постоялец
- Регистрация
- 27 Фев 2015
- Сообщения
- 108
- Реакции
- 47
- Автор темы
- #1
Подскажите, перепробовал уже все возможные варианты выделения цветом активного пункта меню, что-то не работает. Что не так делаю?
<html>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<body>
<section class="FAQ_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" />
<div class="questions_tabs">
<label for="tab_1" id="tab_l1">Tab One</label><br>
<label for="tab_2" id="tab_l2">Tab Two</label><br>
<label for="tab_3" id="tab_l3">Tab Three</label>
</div>
<div class="tabs_ans">
<div id="tab_c1">Content of first tabContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first second</div>
<div id="tab_c2">Content of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first second</div>
<div id="tab_c3">Content of third tab</div>
</div>
</section>
</body>
</html>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<body>
<section class="FAQ_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" />
<div class="questions_tabs">
<label for="tab_1" id="tab_l1">Tab One</label><br>
<label for="tab_2" id="tab_l2">Tab Two</label><br>
<label for="tab_3" id="tab_l3">Tab Three</label>
</div>
<div class="tabs_ans">
<div id="tab_c1">Content of first tabContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first second</div>
<div id="tab_c2">Content of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first secondContent of first second</div>
<div id="tab_c3">Content of third tab</div>
</div>
</section>
</body>
</html>
.questions_tabs{float:left;}
.FAQ_tabs {
position: relative;
margin: 0 auto;
.FAQ_tabs input {
position: absolute;
left: -9999px;
float:left;
}
.tabs_ans {
background: #fff;
height: 230px;
}
.tabs_ans > 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_ans #tab_c1,
#tab_2:checked ~ .tabs_ans #tab_c2,
#tab_3:checked ~ .tabs_ans #tab_c3 {
position: static;
left: 0;
opacity: 1;
}
.questions_tabs1 label {
background: #cc0000;
border-left: 1px solid #ccc;
/* border-radius: 6px 6px 0 0;*/
border-right: 1px solid #f3f3f3;
color: #555;
cursor: pointer;
display: block;
float: left;
font-size: 10px;
font-weight: bold;
height: 15px;
/* line-height: 45px;*/
position: relative;
text-align: center;
/* text-shadow: 0 1px 0 #fff;*/
text-transform: uppercase;
top: 2px;
width: 150px;
z-index: 1;
}
.questions_tabs label:hover {
/* background: none repeat scroll 0 0 #111111;*/
color: #FFFFFF;
text-decoration: underline !important;
background: none repeat scroll 0 0 #d70000;
text-decoration: none !important;
}
.questions_tabs label a:active {
background: none repeat scroll 0 0 #000;
border-bottom: 1px solid snow;
color: white;
cursor: default;
margin-bottom: 0;
text-decoration: none !important;
}
}
.questions_tabs label :focus {
background: none repeat scroll 0 0 #000;
border-bottom: 1px solid snow;
color: white;
cursor: default;
margin-bottom: 0;
text-decoration: none !important;
}
.FAQ_tabs {
position: relative;
margin: 0 auto;
.FAQ_tabs input {
position: absolute;
left: -9999px;
float:left;
}
.tabs_ans {
background: #fff;
height: 230px;
}
.tabs_ans > 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_ans #tab_c1,
#tab_2:checked ~ .tabs_ans #tab_c2,
#tab_3:checked ~ .tabs_ans #tab_c3 {
position: static;
left: 0;
opacity: 1;
}
.questions_tabs1 label {
background: #cc0000;
border-left: 1px solid #ccc;
/* border-radius: 6px 6px 0 0;*/
border-right: 1px solid #f3f3f3;
color: #555;
cursor: pointer;
display: block;
float: left;
font-size: 10px;
font-weight: bold;
height: 15px;
/* line-height: 45px;*/
position: relative;
text-align: center;
/* text-shadow: 0 1px 0 #fff;*/
text-transform: uppercase;
top: 2px;
width: 150px;
z-index: 1;
}
.questions_tabs label:hover {
/* background: none repeat scroll 0 0 #111111;*/
color: #FFFFFF;
text-decoration: underline !important;
background: none repeat scroll 0 0 #d70000;
text-decoration: none !important;
}
.questions_tabs label a:active {
background: none repeat scroll 0 0 #000;
border-bottom: 1px solid snow;
color: white;
cursor: default;
margin-bottom: 0;
text-decoration: none !important;
}
}
.questions_tabs label :focus {
background: none repeat scroll 0 0 #000;
border-bottom: 1px solid snow;
color: white;
cursor: default;
margin-bottom: 0;
text-decoration: none !important;
}
