Buenas, Les cuento que esta semana empecé aplicar CSS a un formulario, antes de eso nunca habia trabajado con CSS.
El problema es que estoy aplicando un sistema de pestaña en dos columnas distintas:
Código HTML:
<td>
<div class="panel">
<ul class="tabs">
<li>KVa</li>
<li>HH</li>
<li>Unidades</li>
</ul>
<div class="paneles">
<div>
Hola1
</div>
<div>
Hola2
</div>
<div>
Hol3
</div>
</div>
</div>
</td>
<td>
<div class="panel">
<ul class="tabs">
<li>BPT</li>
<li>Nuevos-Reacondicionados</li>
<li>Unidades</li>
</ul>
<div class="paneles">
<div>
Hola1
</div>
<div>
Hola2
</div>
<div>
Hola3
</div>
</div>
</div>
</td>
<script type="text/javascript">
cm_tabs({ tab: 'tabs', container: 'paneles', active: 1 });
</script> Lo cual a cada uno le asigno las clases que muestro a continuación:
Código CSS:
Ver original/* tamaño y forma del panel principal */
.panel {
position: relative;
width:500px;
height: 300px;
margin: 0px 0px 0px 0px;
top: 0px;
left: 0px;
}
/* configuracion de las pestañas */
.tabs {
position:absolute;
left: 0px;
top: 0px;
margin:0;
padding:0;
width: 400px;
overflow: hidden;
z-index: 20;
}
ul.tabs li{
float:left;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
list-style: none;
margin: 1px 1px 0px 0px;
display: block;
height: 21px;
line-height: 21px;
padding: 0px 8px;
outline: 0px none;
font-family: arial;
font-size: 10px;
text-decoration: none;
color: #000;
border: 1px solid #91A7B4;
border-bottom-width: 0px;
background: #fff;
border-radius: 4px 4px 0px 0px;
cursor: pointer;
}
ul.tabs li:active{
margin-top: 0px;
height: 21px;
line-height: 19px;
border-top: 3px solid #324A62;
cursor: default;
}
/* Configuración de los paneles */
.panel .paneles {
position:absolute;
left: 0px;
top: 23px;
width: 500px;
height: 275px;
border: 1px solid #91a7b4;
border-radius: 0px 4px 4px 4px;
background: #fff;
overflow: hidden;
}
.panel .paneles > div{
width: 500px;
height: 255px;
font-family: arial;
font-size: 12px;
text-decoration: none;
color: #000;
overflow: auto;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
El unico problema que se me presenta es que al querer cambiar de panel las pestañas estan deshabilitadas.
Creo que al final es un problema de declaracion de las Clases (Digo esto porque como les comente soy un recien nacido en esto del CSS), ya que al trabajar con Id(#) no teno problema alguno, pero la verdad no quiero generar 2 veces el mismo codigo para 2 Id(#).
Si necesitan el codigo JS para verificar si esta bueno, lo adjunto a continuación:
Código Javascript
:
Ver original<script type="text/javascript">
function cm_tabs(options) {
if ((options.tab && options.tab != '') && (options.container && options.container != '')) {
var tabs = document.getElementById(options.tab).children;
var containers = document.getElementById(options.container).children;
for (var i = 0; i < tabs.length; i++) {
tabs[i].i = i;
containers[i].style.display = 'none';
tabs[i].onclick = function() {
for (var e = 0; e < containers.length; e++) {
tabs[e].className = ''
containers[e].style.display = 'none';
}
tabs[this.i].className = 'active';
containers[this.i].style.display = 'block';
}
}
if (options.active && options.active <= tabs.length && options.active != '') {
tabs[(options.active - 1)].className = 'active';
containers[(options.active - 1)].style.display = 'block';
} else {
tabs[0].className = 'active';
containers[0].style.display = 'block';
}
}
return false;
}
</script>
Muchas Gracias de antemano.
Pd: este codigo lo descargue y funciona perfect.