Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.10.2015, 12:55
Новичок на форуме
Отправить личное сообщение для dimasheff Посмотреть профиль Найти все сообщения от dimasheff
 
Регистрация: 27.09.2015
Сообщений: 8

вкладки в 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;
}


не работает. подскажите, пожалуйста, что делать?
Ответить с цитированием
  #2 (permalink)  
Старый 02.10.2015, 13:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Преобразовать строку в HTML код (обратное htmlspecialchars из php) daslex Общие вопросы Javascript 71 23.08.2015 20:41
Kак преобразовать кракозябры(Мнемоники) обратно. html, node js vlzkonopatov AJAX и COMET 5 03.12.2014 14:12
Парсинг HTML -> DOM в нормальных браузерах (таки проблема) FINoM Events/DOM/Window 9 19.01.2014 17:38
Динамические вкладки Tmin10 jQuery 2 07.03.2012 10:48
Типографика и HTML код Manjuriano (X)HTML/CSS 3 23.11.2011 12:22