Menú de capas con Javascript

Un menú por capas con Javascript consta de un número de capas con su contenido y unos enlaces que hacen visible y usable una capa y a la vez oculta el resto, en vez de buscar cual está visible para ocultarla, ocultamos todas y hacemos visible la que deseamos, se hace uso de la propiedad onload del objeto window para inicializar una capa por defecto.


Supongamos que tenemos tres contenidos dentro de sus tres capas, por ejemplo:

<div id="inicio" class="capas">Contenido capa de inicio, puede verse sólo al inicio o se puede ponerle un enlace también como a cualquier otra.</div>
<div id="capa1" class="capas">Contenido 1</div>
<div id="capa2" class="capas">Contenido 2</div>
<div id="capa3" class="capas">Contenido 3</div>

usamos el atributo "capas" para acceder a todas ellas y un id en cada capa que la referencia de manera individual.

<script type="text/javascript">
function menu(divid,classname){

    var dcls=document.getElementsByClassName(classname);
    for(i=0;i<dcls.length;i++){
    if(dcls[i].id===divid){
    dcls[i].style.visibility="visible";
    dcls[i].style.display="block";
    }else{
    dcls[i].style.visibility="hidden";
    dcls[i].style.display="none";
     }
   }
 }
 
function inicia(xid,xclass){
return menu(xid,xclass);
}

onload = function(){
inicia('inicio','capas');
};
</script>


ahora tenemos que hacer los enlaces
hacemos un salto de línea para el código fuente <br><br>


<a href="javascript:onclick('capa1','capas')">enlace capa1</a>
<a href="javascript:onclick('capa2','capas')">enlace capa2</a>
<a href="javascript:onclick('capa3','capas')">enlace capa3</a>


He aquí el ejemplo funcionnando https://www.compostela21.com/tec/mcapas.php



www.compostela21.com
diariocompostela21@gmail.com
19/04/2024