Javascript-форум - Динамически созданные TAB-ы не показывают контент

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Динамически созданные TAB-ы не показывают контент (https://javascript.ru/forum/jquery/56217-dinamicheski-sozdannye-tab-y-ne-pokazyvayut-kontent.html)

Динамически созданные TAB-ы не показывают контент

Изначально есть 2 TAB-а:

<section class="tabs2" id="tabs2">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" onclick="clkClient(1)"/>
<label for="tab-1" class="tab-label-1">Контакт1</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" onclick="clkClient(2)"/>
<label for="tab-2" class="tab-label-2">+++++</label>
<div id="yaya"></div>
<div class="clear-shadow"></div>
<div class="content2">
<div class="content-1">111</div>
<div class="content-2">222</div>
</div>
</section>

function clkClient(nn)
{
alert(nn+' '+$('.tabs2 input.tab-selector-3:checked ~ .content2 .content-3').css ('transform'));
if ($('label[for=tab-'+nn+']').html() == '+++++')
{
$('label[for=tab-'+nn+']').text('Контакт'+nn);
if (nn < 10)
{
nn++;
$('#yaya').append('<input id="tab-'+nn+'" type="radio" name="radio-set" class="tab-selector-'+nn+'" onclick="clkClient('+nn+')" style=""/>'+
"<label for='tab-"+nn+"' class='tab-label-"+nn+"'>+++++</label>");
$('.content2').css('margin-top',-40*nn+'px');
$('.content2').append('<div class="content-'+nn+'">'+nn+'?</div>');
$('.tabs2 input.tab-selector-'+nn+':checked ~ .content2 .content-'+nn).css ({
'-webkit-transform': 'translateY(0px)',
'-moz-transform': 'translateY(0px)',
'-o-transform': 'translateY(0px)',
'-ms-transform': 'translateY(0px)',
'transform':'translateY(0px)'
})
}
}
return false;
}

CSS:

.content2 div {
position: absolute;
top: 0;
padding: 10px 40px;
z-index: 100;
-webkit-transform: translateY(-450px);
-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);
-ms-transform: translateY(-450px);
transform: translateY(-450px);
}

.tabs2 input.tab-selector-1:checked ~ .content2 .content-1,
.tabs2 input.tab-selector-2:checked ~ .content2 .content-2,
.tabs2 input.tab-selector-3:checked ~ .content2 .content-3,
.tabs2 input.tab-selector-4:checked ~ .content2 .content-4,
.tabs2 input.tab-selector-5:checked ~ .content2 .content-5,
.tabs2 input.tab-selector-6:checked ~ .content2 .content-6,
.tabs2 input.tab-selector-7:checked ~ .content2 .content-7,
.tabs2 input.tab-selector-8:checked ~ .content2 .content-8,
.tabs2 input.tab-selector-9:checked ~ .content2 .content-9,
.tabs2 input.tab-selector-10:checked ~ .content2 .content-10 {
z-index: 100;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}

Динамически созданные TAB-ы не показывают контент.

Цитата:

Сообщение от itperm

Динамически созданные TAB-ы не показывают контент

Ты можешь сделать полный, действующий тестовый пример?

itperm,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от ksa (Сообщение 373903)

Ты можешь сделать полный, действующий тестовый пример?

Пример.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=1251" >
 <script type="text/javascript" src="jquery.js"></script>
 <link rel="stylesheet" href="jquery.tabs.css" >
</head>
<body>

<table style="width:450px;height:250px">
  <tr><td>
      <section class="tabs2" id="tabs2">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" onclick="clkClient(1)"/>
        <label for="tab-1" class="tab-label-1">Контакт1</label>
        <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" onclick="clkClient(2)"/>
        <label for="tab-2" class="tab-label-2">+++++</label>
	<div id="yaya"></div>
	<div class="clear-shadow"></div>
	        <div class="content2">
	        <div class="content-1">1?</div>
	        <div class="content-2">2?</div>
        </div>
      </section>
  </td></tr>
</table>

<script>
function clkClient(nn)
{
  if ($('label[for=tab-'+nn+']').html() == '+++++')
  {
	$('label[for=tab-'+nn+']').text('Контакт'+nn);
	if (nn < 10)
	{
		nn++;
		$('#yaya').append('<input id="tab-'+nn+'" type="radio" name="radio-set" class="tab-selector-'+nn+'" onclick="clkClient('+nn+')" style=""/>'+
						"<label for='tab-"+nn+"' class='tab-label-"+nn+"'>+++++</label>");
		$('.content2').css('margin-top',-40*nn+'px');
		$('.content2').append('<div class="content-'+nn+'">'+nn+'?</div>');
		$('.tabs2 input.tab-selector-'+nn+':checked ~ .content2 .content-'+nn).css ({
	'-webkit-transform': 'translateY(0px)',
	'-moz-transform': 'translateY(0px)',
	'-o-transform': 'translateY(0px)',
	'-ms-transform': 'translateY(0px)',
	'transform':'translateY(0px)'
		})
	}
  }
  return false;
}
</script>


</body>
</html>

.tabs2 {
    position: relative;
	margin: 40px auto;
	width: 450px;
}

.tabs2 input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs2 input#tab-2{
	top: 40px;
}
.tabs2 input#tab-3{
	top: 80px;
}
.tabs2 input#tab-4{
	top: 120px;
}
.tabs2 input#tab-5{
	top: 160px;
}
.tabs2 input#tab-6{
	top: 200px;
}
.tabs2 input#tab-7{
	top: 240px;
}
.tabs2 input#tab-8{
	top: 280px;
}
.tabs2 input#tab-9{
	top: 320px;
}
.tabs2 input#tab-10{
	top: 360px;
}

.tabs2 label {
	background: #5ba4a4;
	background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
	background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	display: block;
	width: 80px;
	color: #385c5b;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	float: left;
	clear: both;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 0 0 3px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}

.tabs2 label:after {
    content: '';
	background: #fff;
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}

.tabs2 input:hover + label {
	background: #5ba4a4;
}

.tabs2 label:first-of-type {
    z-index: 10;
}
.tab-label-2 {
    z-index: 9;
}
.tab-label-3 {
    z-index: 8;
}
.tab-label-4 {
    z-index: 7;
}
.tab-label-5 {
    z-index: 6;
}
.tab-label-6 {
    z-index: 5;
}
.tab-label-7 {
    z-index: 4;
}
.tab-label-8 {
    z-index: 3;
}
.tab-label-9 {
    z-index: 2;
}
.tab-label-10 {
    z-index: 1;
}

.tabs2 input:checked + label {
    background: #fff;
	z-index: 6;
}

.clear-shadow {
	clear: both;
}

.content2 {
    background: #fff;
	position: relative;
    width: auto;
	margin: -80px 0 0 120px;
	height: 400px;
	z-index: 5;
	overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
}

.content2 div {
    position: absolute;
	top: 0;
	padding: 10px 40px;
	z-index: 100;
/*    opacity: 0;*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}


.tabs2 input.tab-selector-1:checked ~ .content2 .content-1,
.tabs2 input.tab-selector-2:checked ~ .content2 .content-2,
.tabs2 input.tab-selector-3:checked ~ .content2 .content-3,
.tabs2 input.tab-selector-4:checked ~ .content2 .content-4,
.tabs2 input.tab-selector-5:checked ~ .content2 .content-5,
.tabs2 input.tab-selector-6:checked ~ .content2 .content-6,
.tabs2 input.tab-selector-7:checked ~ .content2 .content-7,
.tabs2 input.tab-selector-8:checked ~ .content2 .content-8,
.tabs2 input.tab-selector-9:checked ~ .content2 .content-9,
.tabs2 input.tab-selector-10:checked ~ .content2 .content-10 {
    z-index: 100;
/*    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);*/
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}

.content2 div h2,
.content2 div h3{
	color: #398080;
}
.content2 div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}

Цитата:

Сообщение от itperm

Пример.

ЦСС не осилил сразу вставить... :cray:

И чего там смотреть? Чего добиваться?

Цитата:

Сообщение от ksa (Сообщение 374287)

ЦСС не осилил сразу вставить... :cray:

И чего там смотреть? Чего добиваться?

Первые 2 таба, которые в html, контент показывают (перемещается вниз на 10п). Создаваемые на лету табы - не перемещают.

itperm,
вы добавляите в див #yaya -- строка 36 пост 4

и как после этого сработать строке 156 css пост 4

#yaya блокирует всю цепочку
.tabs2 input.tab-selector-3:checked ~ .content2 .content-3,
где красное #yaya вырыл ров и поставил забор, чтоб никакой инпут не увидел ~~светлое будущее~~ .content2

Цитата:

Сообщение от itperm

Смотрю в Опере...

<!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>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.tabs2 {
    position: relative;
	margin: 40px auto;
	width: 450px;
}
.tabs2 input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs2 input#tab-2{
	top: 40px;
}
.tabs2 input#tab-3{
	top: 80px;
}
.tabs2 input#tab-4{
	top: 120px;
}
.tabs2 input#tab-5{
	top: 160px;
}
.tabs2 input#tab-6{
	top: 200px;
}
.tabs2 input#tab-7{
	top: 240px;
}
.tabs2 input#tab-8{
	top: 280px;
}
.tabs2 input#tab-9{
	top: 320px;
}
.tabs2 input#tab-10{
	top: 360px;
}
.tabs2 label {
	background: #5ba4a4;
	background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
	background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	display: block;
	width: 80px;
	color: #385c5b;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	float: left;
	clear: both;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 0 0 3px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.tabs2 label:after {
    content: '';
	background: #fff;
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}
.tabs2 input:hover + label {
	background: #5ba4a4;
}
.tabs2 label:first-of-type {
    z-index: 10;
}
.tab-label-2 {
    z-index: 9;
}
.tab-label-3 {
    z-index: 8;
}
.tab-label-4 {
    z-index: 7;
}
.tab-label-5 {
    z-index: 6;
}
.tab-label-6 {
    z-index: 5;
}
.tab-label-7 {
    z-index: 4;
}
.tab-label-8 {
    z-index: 3;
}
.tab-label-9 {
    z-index: 2;
}
.tab-label-10 {
    z-index: 1;
}
.tabs2 input:checked + label {
    background: #fff;
	z-index: 6;
}
.clear-shadow {
	clear: both;
}
.content2 {
    background: #fff;
	position: relative;
    width: auto;
	margin: -80px 0 0 120px;
	height: 400px;
	z-index: 5;
	overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
}
.content2 div {
    position: absolute;
	top: 0;
	padding: 10px 40px;
	z-index: 100;
/*    opacity: 0;*/
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}
.tabs2 input.tab-selector-1:checked ~ .content2 .content-1,
.tabs2 input.tab-selector-2:checked ~ .content2 .content-2,
.tabs2 input.tab-selector-3:checked ~ .content2 .content-3,
.tabs2 input.tab-selector-4:checked ~ .content2 .content-4,
.tabs2 input.tab-selector-5:checked ~ .content2 .content-5,
.tabs2 input.tab-selector-6:checked ~ .content2 .content-6,
.tabs2 input.tab-selector-7:checked ~ .content2 .content-7,
.tabs2 input.tab-selector-8:checked ~ .content2 .content-8,
.tabs2 input.tab-selector-9:checked ~ .content2 .content-9,
.tabs2 input.tab-selector-10:checked ~ .content2 .content-10 {
    z-index: 100;
/*    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);*/
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
}
.content2 div h2,
.content2 div h3{
	color: #398080;
}
.content2 div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table style="width:450px;height:250px">
  <tr><td>
      <section class="tabs2" id="tabs2">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" onclick="clkClient(1)"/>
        <label for="tab-1" class="tab-label-1">Контакт1</label>
        <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" onclick="clkClient(2)"/>
        <label for="tab-2" class="tab-label-2">+++++</label>
	<div id="yaya"></div>
	<div class="clear-shadow"></div>
	        <div class="content2">
	        <div class="content-1">1?</div>
	        <div class="content-2">2?</div>
        </div>
      </section>
  </td></tr>
</table>

<script>
function clkClient(nn)
{
  if ($('label[for=tab-'+nn+']').html() == '+++++')
  {
	$('label[for=tab-'+nn+']').text('Контакт'+nn);
	if (nn < 10)
	{
		nn++;
		$('#yaya').append('<input id="tab-'+nn+'" type="radio" name="radio-set" class="tab-selector-'+nn+'" onclick="clkClient('+nn+')" style=""/>'+
						"<label for='tab-"+nn+"' class='tab-label-"+nn+"'>+++++</label>");
		$('.content2').css('margin-top',-40*nn+'px');
		$('.content2').append('<div class="content-'+nn+'">'+nn+'?</div>');
		$('.tabs2 input.tab-selector-'+nn+':checked ~ .content2 .content-'+nn).css ({
	'-webkit-transform': 'translateY(0px)',
	'-moz-transform': 'translateY(0px)',
	'-o-transform': 'translateY(0px)',
	'-ms-transform': 'translateY(0px)',
	'transform':'translateY(0px)'
		})
	}
  }
  return false;
}
</script>
</body>
</html>
</body>
</html>

Все "табы" создаются ниже последнего... Т.е. смещаясь все ниже и ниже.

если убрать #yaya, табы вставляются в самом низу. как сделать, подскажите

itperm, заменить на
before
$('#yaya').~~append~~