Div - Cambio de position absolute a static no respeta top y left

oggy_15_3 · #1 (**permalink**) 29/12/2015, 13:11

DISCULPEN, EL TÍTULO NO TIENE NADA QUE VER CON EL CONTENIDO.

Hola a todos.
Tengo un código HTML y CSS que me permite crear un tab (pestaña o panel).
La cosa es que actualmente me funciona el cambio de pestaña por medio de un radio, pero me gustaría hacerlo por medio quizas del mismo titulo de la pestaña que esta en la etiqueta li.

Agradezco de antemano la atención.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
*{
    margin:0;   
    padding:0px;
}
.clsDivTabs_JD{
    position: absolute;
    left: 90px;
    top: 43px;
}
 
.clsDivTabs_JD ul{
    list-style-type:none;   
}
.clsDivTabs_JD ul li{
    float:left;
    margin:2px 2px;
    border:1px solid #999;
    min-width:80px;
    text-align:center;
    
}
 
/*.clsDivTabs_JD ul li:active + p{
    background-color:#F00;
}*/
 
.clsDivTabs_JD ul li p{
    margin:0;
    text-align:left;
    position:absolute;
    z-index:2;
    border:2px solid #CCC;
    width:350px;height:200px;
    left:0px;
}
 
.clsDivTabs_JD ul li input[type=radio]{
    /*visibility:hidden;*/  
}
.clsDivTabs_JD ul li input[type=radio]:checked + p{
    background-color:#F00;
    z-index:3;
}
.clsDivTabs_JD ul li input[type=radio]:not(:checked) + p{
    z-index:2;
}
</style>
</head>
 
<body>
<div class="clsDivTabs_JD">
<ul>
<li><input type="radio" name="rbTab" />PANEL 1
<p style="display:none;">Contenido Panel 1</p>
</li>
<li><input type="radio" name="rbTab"/>PANEL 2
<p >Contenido Panel 2</p>
</li>
</ul>
</div>
 
</body>
</html>

jaskonio · #2 (**permalink**) 31/12/2015, 06:18

Una opción es agregar Label antes del input

Código HTML:

Ver original<li><label for="rbTab">panel 1</label><input type="radio" name="rbTab" id="rbTab" />
<p style="display:none;">Contenido Panel 1</p>
</li>
<li><label for="rbTab2">panel 2</label><input type="radio" name="rbTab" id="rbTab2" />
<p >Contenido Panel 2</p>

y luego podrias ocultar los input.
Saludos!