Изначально есть 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-ы не показывают контент.
