activar foco al cargar página HTML:
Código:
CSS:<div class="contenedor-del-tab">
<div class="cont-tabs">
<ul>
<li tabindex="1" class="padre">
<div class="body-cont-1" style="background:url(logo.png) no-repeat center center;">
</div>
</li>
<li tabindex="2" class="padre">
<span>></span><strong>Control de Acceso</strong>
<div class="body-cont-2">
<h2>CONTROL DE ACCESO</h2>
<div class="left">
<img src="/images/control_de_acceso.jpg" width="270" height="188" alt="Control de Acceso" />
</div>
<div class="right">
<p>Como su nombre lo indica este sistema es utilizado para el control de áreas restringidas al interior de una empresa, institución, estadio, hospital, minera, etc. Un sistema de control de acceso físico para controlar la vía a determinada área, involucra hardware y un software. Consiste en implementar algún mecanismo electrónico que identifique si la persona que quiere entrar está autorizada, de lo contrario denegarle el acceso.</p>
<h3>Tipos de control de acceso</h3>
<ul>
<li>Identificación de huella digital (biometría).</li>
<li>Tarjetas de proximidad.</li>
<li>Tarjetas de proximidad + Huella.</li>
<li>Teclado para ingresar numero de usuario y contraseña.</li>
</ul>
<h3>Beneficios principales:</h3>
<ul>
<li>Seguridad de sus instalaciones.</li>
<li>Control del acceso a determinadas áreas por usuarios y horario.</li>
<li>Reporte impreso de los accesos realizados por determinado personal.</li>
<li>Modernización de la imagen de sus instalaciones.</li>
</ul>
</div>
</div>
</li>
<li tabindex="3" class="padre">
<span>></span><strong>Sistema de cámaras CCTV / IP</strong>
<div class="body-cont-3">
<h2>SISTEMA DE CAMARAS CCTV / IP</h2>
<div class="left">
<img src="/images/ip.jpg" width="270" height="188" alt="Sistema de cámaras CCTV / IP" />
</div>
<div class="right">
<p>Las cámaras de vigilancia, forman parte de lo que se conoce como circuito cerrado de televisión o su acrónimo CCTV, que viene del inglés: Closed Circuit Television, es una tecnología de vídeo vigilancia diseñada para supervisar una diversidad de ambientes y actividades.</p>
<p>Brindamos soluciones en las cámaras de circuito cerrado de televisión o su acrónimo CCTV y cámaras de vigilancia IP, integración de sistemas de seguridad.
</p>
<p>Nuestro servicio es integral, buscamos la mejor relación entre sus necesidades y los costos del sistema para encontrar el más óptimo, convirtiendo el producto final es su tranquilidad. Somos integradores de las últimas tecnologías en cámaras de seguridad de alta definición, cámaras de seguridad infrarrojas de largo alcance, cámaras de vigilancia IP con movimiento PTZ, Cámaras IP Megapíxel, Domos PTZ de Alta velocidad.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
Código:
[URL="http://grupochalas.com/senetcom/seguridad-electronica.html"]Aquí[/URL] en esta página se puede ver el asunto funcionando..cont-tabs * {
-webkit-transition: all .30s ease;
-moz-transition: all .30s ease;
-ms-transition: all .30s ease;
-o-transition: all .30s ease;
transition: all .30s ease;
}
.contenedor-del-tab {
box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
position:relative;
height:600px;
background:lightGrey;
background: -moz-linear-gradient(top, rgba(211, 211, 211, 1) 2%, rgba(128, 128, 128, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(211, 211, 211, 1)), color-stop(100%,rgba(128, 128, 128, 1)));
background: -webkit-linear-gradient(top, rgba(211, 211, 211, 1) 2%,rgba(128, 128, 128, 1) 100%);
background: -o-linear-gradient(top, rgba(211, 211, 211, 1) 2%,rgba(128, 128, 128, 1) 100%);
background: -ms-linear-gradient(top, rgba(211, 211, 211, 1) 2%,rgba(128, 128, 128, 1) 100%);
background: linear-gradient(top, rgba(211, 211, 211, 1) 2%,rgba(128, 128, 128, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#808080',GradientType=0 );
-webkit-box-shadow: inset 0 0 7px #292929;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #252525;
}
.cont-tabs h2, .cont-tabs h3 {
text-align:center;
}
.cont-tabs h2 {
font-size:16px;
font-weight:bold;
margin-top:10px;
margin-bottom:30px;
}
.cont-tabs h3 {
font-size:14px;
font-weight:bold;
text-align:left;
}
.cont-tabs p {
text-align:justify;
}
.cont-tabs strong {
cursor:pointer;
}
.cont-tabs ul .padre:focus strong, .cont-tabs ul .padre:hover strong {
text-shadow: 0 0 5px #444;
color:#ededed;
}
.cont-tabs ul {
list-style:none;
padding:10px 0 0 0;
}
.cont-tabs ul .padre {
height:17px;
width:310px;
padding-left:10px;
margin-bottom:10px;
padding-top:3px
box-shadow:inset 0 0 0 rgba(0,0,0,0.0);
}
.cont-tabs ul li[tabindex="1"] {
height:0 !important;
}
.cont-tabs ul .padre:hover {
background-color:rgba(0,0,0,0.1);
box-shadow:inset 0 0 10px rgba(0,0,0,0.2);
}
.cont-tabs ul .padre span {
margin-right:3px;
font-weight:bold;
}
.cont-tabs ul .padre:hover span, .cont-tabs ul .padre:focus span {
margin-right:10px;
}
.body-cont-1 {
background:url(../images/logo-2.png) no-repeat center center;
background-color:transparent !important;
}
.cont-tabs ul li[tabindex="1"] .body-cont-1, .cont-tabs ul li[tabindex="1"]:focus .body-cont-1, .cont-tabs ul li[tabindex="2"]:focus .body-cont-2, .cont-tabs ul li[tabindex="3"]:focus .body-cont-3, .cont-tabs ul li[tabindex="4"]:focus .body-cont-4, .cont-tabs ul li[tabindex="5"]:focus .body-cont-5, .cont-tabs ul li[tabindex="6"]:focus .body-cont-6 {
opacity:1;
visibility:visible;
}
.body-cont-1, .body-cont-2, .body-cont-3, .body-cont-4, .body-cont-5, .body-cont-6 {
top:0;
background-color:#fff;
border-left:1px solid #ddd;
visibility:hidden;
height:100%;
margin-left:310px;
padding:0 10px 0 10px;
width:610px;
position:absolute;
z-index:1000;
opacity:0;
box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.cont-tabs .left, .cont-tabs .right {
width:305px;
}
.cont-tabs ul li ul {
margin: 0 0 1.5em;
padding-left:15px;
list-style:disc;
}
Lo que quiero saber es si se puede hacer que el el primer li aparezca con el focus activado, de esa manera podría aparecer al abrir la ventana el primero en vez de que apareazca todo cerrado, seria genial!
de antemano doy gracias! y disculpen si el código está un poco mal estructurado, ahora es que estoy empezando a trabajar un poco más organizado ejeje
