Hola pues podrías hacerlo de la siguiente forma, cuando cargas la página llamas a la funcion load(), pues dentro de esa misma función puedes llamar a ocultarEstilos() de esa forma cuando se cargue, los divs estaran ocultos y podrás visualizarlos pinchando en los enlaces.
Te dejo el código espero k t sirva, Un saludo!!
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
Codigo que muestra como canviar el atributo display de una lista de divs
Este codigo ha sido probado con IE 5,6 y 7, Firefox 2.0, Opera 9.60 y Safari 3
http://www.lawebdelprogramador.com
-->
<html>
<head>
<title>Mostrar y esconder un listado de divs modificando el estilo del div (JavaScript y estilos CSS)</title>
<style type="text/css">
/* Determina los estilos para mostrar el contenido */
.estilo1 {border:1px solid;margin-top:10px;padding:5px;}
.estilo2 {border:1px solid;margin-top:10px;padding:5px;font-weight:bold;}
/* Estilo de ejemplo para los divs internos */
.otroEstilo {border:1px solid;margin-top:10px;padding:5px;font-weight:normal;}
</style>
<script type="text/javascript">
<!--
/* En estas variables, las definiremos en la funcion load */
var table=""
var cells=""
/*
* Esta funcion se ejecuta el cargar la web, en el evento onload() del body
*/
function load()
{
/* table equivale al contenido del id "list" */
table=document.getElementById("list");
/* cells es una lista de los elementos encontrados en el orden en que aparecen */
cells=table.getElementsByTagName('div');
ocultarEstilos();
}
/*
* Funcion para esconder los estilos
* Tiene que recibir el nombre del estilo a esconder
*/
function ocultarEstilo(estilo)
{
/* Realizamos un bucle por todos los elementos del id "list" */
for(var i=0;i<cells.length;i++)
{
/* Si concuerda el nombre del div con el parametro recibido... */
if(table.getElementsByTagName('div')[i].getAttribute('name')==estilo)
{
/* Indicamos que no se visualice */
table.getElementsByTagName('div')[i].style.display="none";
}
}
}
/*
* Funcion para mostrar los estilos
* Tiene que recibir el nombre del estilo a mostrar
*/
function mostrarEstilo(estilo)
{
for(var i=0;i<cells.length;i++)
{
/* Si concuerda el nombre del div con el parametro recibido... */
if(table.getElementsByTagName('div')[i].getAttribute('name')==estilo)
{
/* Indicamos que se visualice */
table.getElementsByTagName('div')[i].style.display="";
}
}
}
/*
* Funcion para ocultar todos los divs dentro del id "List"
*/
function ocultarEstilos()
{
for (var i=0;i<cells.length;i++)
{
/* Siempre que el div superior (parent) del nodo tenga el id "list"... */
if(table.getElementsByTagName('div')[i].parentNode.getAttribute('id')=="list")
{
/* Indicamos que no se visualice */
table.getElementsByTagName('div')[i].style.display="none";
}
}
}
/*
* Funcion para mostrar todos los divs dentro del id "List"
*/
function mostrarEstilos()
{
for (var i=0;i<cells.length;i++)
{
/* Siempre que el div superior (parent) del nodo tenga el id "list"... */
if(table.getElementsByTagName('div')[i].parentNode.getAttribute('id')=="list")
{
/* Indicamos que se visualice */
table.getElementsByTagName('div')[i].style.display="";
}
}
}
-->
</script>
</head>
<!-- Al finalizar la carga de la pagina, cargamos los valores iniciales -->
<body onload="javascript:load()">
<h1>Mostrar y esconder un listado de divs modificando el estilo del div (JavaScript y estilos CSS)</h1>
<p>
<!--
Opciones de menu
Depende de la opción que pulsemos, mostramos u ocultamos algunos divs
cambiandole el estilo estiloNshow por estiloNhide
-->
<a href="javascript:ocultarEstilo('estilo1');">Esconder estilo1</a>
<br /><a href="javascript:ocultarEstilo('estilo2');">Esconder estilo2</a>
<br /><a href="javascript:mostrarEstilo('estilo1');">Mostrar estilo1</a>
<br /><a href="javascript:mostrarEstilo('estilo2');">Mostrar estilo2</a>
<br /><a href="javascript:ocultarEstilos();">Quitar todos los estilos</a>
<br /><a href="javascript:mostrarEstilos();">Mostrar todos estilos</a>
</p>
<!-- div principal -->
<div id="list">
<!-- listado de divs que canviaremos su class -->
<div name="estilo1" class="estilo1">div name estilo1
<div class='otroEstilo'>div dentro de estilo1. Este estilo no se ve afectado porque el div superior (parent) no tiene el id "list"</div>
</div>
<div name="estilo2" class="estilo2">div name estilo2
<div class='otroEstilo'>div dentro de estilo2. Este estilo no se ve afectado porque el div superior (parent) no tiene el id "list"</div>
</div>
<div name="estilo1" class="estilo1">div name estilo1</div>
<div name="estilo2" class="estilo2">div name estilo2</div>
<div name="estilo1" class="estilo1">div name estilo1</div>
<div name="estilo2" class="estilo2">div name estilo2</div>
</div>
</body>
</html>