Mostrar y ocultar div con javascript
Por ASP clásico / 15/09/2014 @ 09:01:54 / 1437 visitas
En este artículo se muestra cómo ocultar el contenido que se hace visible cuando se hace click en un enlace utilizando javascript.
Este es el código javascript:
<script type="text/javascript" language="JavaScript"><!--function HideContent(d) {document.getElementById(d).style.display = "none";}function ShowContent(d) {document.getElementById(d).style.display = "block";}function ReverseDisplay(d) {if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }else { document.getElementById(d).style.display = "none"; }}//--></script>El contenido a mostar/ocultar es el siguiente:
<div id="uniquename" style="display:none;"><p>Content goes here.</p></div>
El "uniquename" para el id debe ser diferente de cualquier otro id en la página web. Vamos a suponer un id de "uniquename" para el resto de los ejemplos.
El style = "display: none;" oculta el contenido cuando la página web se carga por primera. Si desea mostrar el contenido cuando la página web se carga por primera, eliminar ese atributo de la etiqueta div.
Tres enlaces diferentes están disponibles. Los enlaces pueden estar ubicados en cualquier parte de la página web, aunque cerca del contenido que se muestra / oculta es la habitual.
Utilice este enlace para mostrar el contenido al hacer clic en:
<a href="javascript:ShowContent('uniquename')">Click to show.</a>
Utilice este enlace para ocultar el contenido cuando se hace click:
<a href="javascript:HideContent('uniquename')">Click to hide.</a>
<a href="javascript:ReverseDisplay('uniquename')">Click to show/hide.</a>
Observe que el nombre del id se especifica en cada uno de los enlaces de arriba. Change 'uniquename' sea el nombre id de la div contenido que desea efectuar.
<a onmouseover="ReverseDisplay('uniquename'); return true;" href="http://example.com/page.html">[Show/Hide Stuff]</a>
Si no se desea URL para el enlace, "#" se puede utilizar en su lugar.
Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.
Descargo de Responsabilidad:
El contenido y los recursos que ofrecemos en CoreASP están destinados únicamente a proporcionar herramientas y ejemplos prácticos para el desarrollo en ASP Clásico. Esta información es de carácter general y no debe considerarse asesoramiento profesional o técnico específico para tu proyecto. Aunque hacemos todo lo posible por asegurar la calidad y precisión de los recursos compartidos, no garantizamos que sean completamente libres de errores o que se ajusten perfectamente a todas las situaciones. CoreASP no se responsabiliza por cualquier pérdida, daño o inconveniente derivado del uso directo o indirecto de los recursos o información proporcionada. Además, CoreASP no respalda ni asume responsabilidad por enlaces o contenido de terceros que puedan estar referenciados en nuestra plataforma. Todos los derechos de propiedad intelectual sobre el contenido y recursos publicados en CoreASP pertenecen a CoreASP o a sus respectivos propietarios, y su uso está sujeto a las condiciones de la licencia especificada para cada recurso. Nos reservamos el derecho de modificar este descargo de responsabilidad en cualquier momento sin previo aviso. Para más detalles, consulta el documento completo de términos y condiciones.
13/07/2025 @ 10:56:59
23/05/2025 @ 14:09:59
07/04/2025 @ 07:54:51
29/03/2025 @ 16:49:42
12/02/2025 @ 10:15:42
21/01/2025 @ 16:21:11
Recursos inteligentes para desarrollos con ASP Clásico.