Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   вкладки в html (https://javascript.ru/forum/dom-window/58643-vkladki-v-html.html)

dimasheff 02.10.2015 12:55

вкладки в html
 
подскажите, хочу сделать вкладки.

нашел такой код:

<!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;
}


не работает. подскажите, пожалуйста, что делать?

ksa 02.10.2015 13:33

Цитата:

Сообщение от dimasheff
не могу никак изменить цвет выбранной вкладки.

Оно?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.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  ~ .labels #tab_l1,
#tab_2:checked  ~ .labels #tab_l2,
#tab_3:checked  ~ .labels #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>
<script type='text/javascript'>
</script>
</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>


Часовой пояс GMT +3, время: 03:14.