Placer des blocs de texte cachés améliore la perception visuelle d'une page de site Web - elle se charge dans le navigateur exactement comme le concepteur l'a conçue, quelle que soit la quantité d'informations publiées. De plus, c'est plus pratique pour le visiteur - à la recherche du bloc d'informations nécessaire, il n'a pas à parcourir tout le tableau, mais seulement de petites "pointes des icebergs".
Il est nécessaire
Connaissances de base en HTML et JavaScript
Instructions
Étape 1
Utilisez une fonction JavaScript personnalisée pour masquer et afficher les blocs de texte souhaités dans une page HTML. Une fonction commune à tous les blocs est bien plus pratique que d'ajouter du code à chacun d'eux séparément. Dans la partie en-tête du code source de la page, placez les balises de script d'ouverture et de fermeture, et entre elles, créez une fonction vide avec un nom, par exemple, swap et un identifiant de paramètre d'entrée requis: function swap (id) {}
Étape 2
Ajoutez deux lignes de code JavaScript au corps de la fonction, entre les accolades. La première ligne doit lire l'état actuel du bloc de texte - que sa visibilité soit activée ou désactivée. Il peut y avoir plusieurs blocs de ce type dans un document, chacun doit donc avoir son propre identifiant - c'est sa fonction qui reçoit id comme seul paramètre d'entrée. A l'aide de cet identifiant, il recherche le bloc nécessaire dans le document, en attribuant la valeur de visibilité/invisibilité (l'état de la propriété display) à la variable sDisplay: sDisplay = document.getElementById (id).style.display;
Étape 3
La deuxième ligne doit changer la propriété d'affichage du bloc de texte souhaité en l'opposé - masquer si le texte est visible et afficher s'il est masqué. Cela peut être fait avec le code suivant: document.getElementById (id).style.display = sDisplay == 'none'? '': 'rien';
Étape 4
Ajoutez la feuille de style suivante à la section d'en-tête: a {cursor: pointer} Vous en aurez besoin pour afficher correctement le pointeur de la souris lorsque vous survolez une balise de lien incomplète. A l'aide de tels liens, vous organisez dans la page basculer la visibilité / l'invisibilité des blocs de texte.
Étape 5
Placez ces liens bascule dans le texte avant chaque bloc masqué, et dans les blocs à la fin du texte, ajoutez un lien similaire. Insérez le texte invisible dans les balises span dont l'invisibilité est définie dans leurs attributs de style. Par exemple: Expand text +++ Ceci est du texte caché --- Dans cet exemple, cliquer sur un lien trois plus appellera la fonction ci-dessus sur l'événement onClick, en lui transmettant l'ID du bloc à rendre visible. Et à l'intérieur du bloc, il y a un lien de trois moins avec les mêmes fonctions - cliquer dessus masquera le texte.
Étape 6
Créez le nombre requis de blocs de texte, similaire à celui décrit à l'étape précédente, en n'oubliant pas de modifier les identifiants dans l'attribut id de la balise span et dans la variable transmise à la fonction par l'événement onClick dans les deux liens.
