Creeu una experiència d'estil d'aplicació als vostres llocs web
Dynamic HTML (DHTML) us permet crear una experiència d'estil d'aplicació als vostres llocs web, reduint la freqüència de la càrrega completa de les pàgines senceres. A les aplicacions, quan feu clic a alguna cosa, l'aplicació canvia immediatament per mostrar aquest contingut específic o per proporcionar-vos la vostra resposta.
En canvi, les pàgines web s'han de tornar a carregar o s'ha de carregar una pàgina nova completa. Això pot fer que l'experiència de l'usuari sigui més disjuntiva. Els vostres clients han d'esperar a carregar la primera pàgina i esperar una altra vegada perquè la segona pàgina es carregui, i així successivament.
Utilitzeu & lt; div & gt; per millorar l'experiència de l'espectador
L'ús de DHTML, una de les maneres més fàcils de millorar aquesta experiència, és que els elements div s'activen i desactiven per mostrar el contingut quan es demana. Un element div defineix les divisions lògiques a la vostra pàgina web. Penseu en un div com una caixa que pot contenir paràgrafs, encapçalaments, enllaços, imatges i fins i tot altres divs.
El que necessiteu
Per crear una divisió que es pot activar i desactivar, necessiteu el següent:
- Un enllaç per controlar el div, encès i apagat quan es fa clic
- El div per mostrar i ocultar
- CSS per a estilitzar el div ocult o visible
- JavaScript per realitzar l'acció
L'enllaç de control
El vincle de control és la part més fàcil. Simplement, creeu un enllaç com si fos a una altra pàgina. De moment, deixeu l'atribut href en blanc.
Aprendre HTMLCol·loqueu aquest lloc a la vostra pàgina web.
La Div per mostrar i amagar
Creeu l'element div que voleu mostrar i amagar. Assegureu-vos que el vostre div té una identificació única en ell. A l'exemple, l'identificador únic és aprendre HTML .
Aquesta és la columna de contingut. Comença en blanc, tret d'aquest text d'explicació. Trieu el que voleu aprendre a la columna de navegació de l'esquerra. El text apareixerà a continuació: Creeu dues classes per al vostre CSS: un per ocultar el div i l'altre per mostrar-lo. Teniu dues opcions per a això: visualització i visibilitat. La pantalla elimina el div del flux de la pàgina i la visibilitat només canvia la forma en què es veu. Alguns codificadors prefereixen mostrar , però de vegades la visibilitat també té sentit. Per exemple: Si voleu utilitzar la visibilitat, canvieu aquestes classes a: Afegiu la classe oculta al vostre div perquè comenci a ocultar-se a la pàgina: Tota aquesta seqüència d'ordres és mirar el conjunt de classe actual al vostre div i canviar-lo a unhidden si està marcat com a ocult o viceversa. Aquestes són només algunes línies de JavaScript. Col·loqueu el següent al capdavant del document HTML (abans de l'etiqueta Saber HTML
El CSS per mostrar i amagar la div
JavaScript per fer-lo funcionar