El objetivo de este post es recuperar la categoria de html, php, mysql,... y vamos a hacer algo sencillo y relativamente vistoso.
El objetivo es hacer un enlace que al pulsarle muestre u oculte una parte de la web.
Primero necesitamos un script que haga esa función como el script podremos usarle en más páginas pues lo mejor es hacer un fichero nuevo que contenga al script.
Cogemos el bloc de notas y copiamos:
function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none')
vista='block';
else
vista='none';
document.getElementById(esto).style.display = vista;
}
Y lo salvamos con el nombre que desemos, por ejemplo cambiar.js, importante que acabe en .js. Y obviamente lo subimos a algun lado, dandonos su dirección web.
En la página donde queramos usarlo tendremos que añadir al inicio:
<script src="DIRECCIÓN_DEL_SCRIPT/cambiar.js" type="text/javascript"></script>
De esta manera se incluira siempre el script.
Ahora tendremos que construir el enlace, con cuidado que este no se oculte posteriormente pues sino no podríamos volver a mostrar el bloque.
<a href="#" onclick="cambiar('XXXX'); return false;">Enlace</a>
Ese xxxx sera el nombre del bloque que queramos cambiar.
Y ahora metermos todo lo que queramos ocultar / mostar en una capa, definiendo si queremos que por defecto se muestre, entoces sería meter todo el bloque entre:
<div id="XXXXX" style="display:block;">
el resto del bloque a ocultar / mostrar
</div>
Si queremos que por defecto no se muestre pues abría que cambiar donde pone block por none.
<div id="XXXXX" style="display:none;">
el resto del bloque a ocultar / mostrar
</div>
Y guardamos los cambios y probamos que todo funcione.
El objetivo es hacer un enlace que al pulsarle muestre u oculte una parte de la web.
Primero necesitamos un script que haga esa función como el script podremos usarle en más páginas pues lo mejor es hacer un fichero nuevo que contenga al script.
Cogemos el bloc de notas y copiamos:
function cambiar(esto)
{
vista=document.getElementById(esto).style.display;
if (vista=='none')
vista='block';
else
vista='none';
document.getElementById(esto).style.display = vista;
}
Y lo salvamos con el nombre que desemos, por ejemplo cambiar.js, importante que acabe en .js. Y obviamente lo subimos a algun lado, dandonos su dirección web.
En la página donde queramos usarlo tendremos que añadir al inicio:
<script src="DIRECCIÓN_DEL_SCRIPT/cambiar.js" type="text/javascript"></script>
De esta manera se incluira siempre el script.
Ahora tendremos que construir el enlace, con cuidado que este no se oculte posteriormente pues sino no podríamos volver a mostrar el bloque.
<a href="#" onclick="cambiar('XXXX'); return false;">Enlace</a>
Ese xxxx sera el nombre del bloque que queramos cambiar.
Y ahora metermos todo lo que queramos ocultar / mostar en una capa, definiendo si queremos que por defecto se muestre, entoces sería meter todo el bloque entre:
<div id="XXXXX" style="display:block;">
el resto del bloque a ocultar / mostrar
</div>
Si queremos que por defecto no se muestre pues abría que cambiar donde pone block por none.
<div id="XXXXX" style="display:none;">
el resto del bloque a ocultar / mostrar
</div>
Y guardamos los cambios y probamos que todo funcione.
Han visto este artículo completo
personas.
HTML permitido: <strong>, <s>, <em>, <u>, <a>, <img>
Presione Ctrl+D para añadir a favoritos
Algunas reflexiones personales e intrasferibles. Porque el mundo en el que vivimos merece ser vivido de mejor forma.
Rank en Blogcindario:
Número de artículos:
[