|
Сообщение от itperm
|
|
Первые 2 таба, которые в html, контент показывают (перемещается вниз на 10п). Создаваемые на лету табы - не перемещают.
|
Смотрю в Опере...
<!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>
Все "табы" создаются ниже последнего... Т.е. смещаясь все ниже и ниже.