En HTML créer un spoiler - comment cela fonctionne:

En HTML créer un spoiler - comment cela fonctionne:


effet Spoiler avec HTML, CSS et jQuery.

Créer une structure de base de HTML

Avant que vous pouvez animer les spoilers, vous devez d'abord prendre soin du cadre HTML.

  • Fondamentalement, vous avez besoin pour un effet de spoiler trois composants: un texte de cliquer et donc d'afficher le texte de spoiler, texte et cliquez sur Masquer et le texte de spoiler réelle.
  • Le texte à afficher, par exemple, pourrait "show spoiler» et le chaud pour cacher 'Cacher les spoilers ".
  • Afin d'utiliser le même pour les deux fonctions cliquez-texte (Fade In / Out), définir à la fois un "A" tag comme un cadre fixe, donc un lien, et de lui donner une valeur vide ("#"), parce que sur ces oui non Liez nouvelle page sera ouverte.
  • Cela vous permet d'assigner une action cliquez ce lien aussi, vous devez attribuer l'étiquette une dernière ID.


  • 04h19

    En HTML Créez un diaporama - comment cela fonctionne:

    Si vous souhaitez développer votre site Web avec un diaporama, vous pouvez vous assurer ...

  • Le code complet ressemblerait alors à ceci:
  • Entre maintenant écrire les deux textes de cliquer et de lui attribuer une balise span avec une classe afin de rendre cela avec CSS plus tard.
  • La fonction complète de clic devrait ressembler à ceci:
    class = "lien"> de classe Afficher Aileron = "lien"> Cacher les spoilers
  • Enfin, vous devez créer un autre élément div, dans lequel vous pouvez d'abord caché le texte de spoiler et pouvez montrer un clic. Cela pourrait par exemple être le suivant:
    ceci est le texte masqué

Conception graphique avec CSS

Une fois que vous avez créé le cadre HTML, vous pouvez vous concentrer sur l'utilisation de CSS pour la mise en œuvre graphique, à savoir essentiellement le texte de spoiler et le lien pour cacher cacher premier.

  • Vous devez d'abord la section de la tête de votre fichier HTML créer un CSS-domaine. Insérez simplement les deux lignes suivantes:
  • Maintenant, vous pouvez définir les éléments individuels entre les deux lignes. Pour masquer le texte de spoiler d'abord, vous devez écrire:
    #spoiler
    {
    display: none;
    }
  • Display ("Affichage") définit l'option d'affichage de l'élément, et «aucun» («non») précise que l'article est caché.
  • Le même que vous pouvez pour le texte "Cacher les spoilers" appliquent par la balise span "style =" display: none; '', vous laissant avec la gamme complète devrait ressembler à ceci:
    Cacher les spoilers
  • En option, vous pouvez faire les articles encore, par exemple, changer la couleur des liens en bleu:
    .link
    {
    color: blue;
    }

Créer effet de spoiler avec jQuery

Une fois que vous créez le squelette HTML et produit les deux éléments cachés avec CSS, vous pouvez maintenant créer l'effet de spoiler avec jQuery.

  • Vous devrez d'abord la bibliothèque actuelle jQuery afin d'accéder à différentes fonctions. Il suffit d'ajouter dans la section de la tête la ligne suivante:
  • Ensuite, définir un code de script dans la section de tête en écrivant:
  • Entre maintenant créer le code de l'effet de spoiler. Cela ressemble à ceci:
    $ (Document) .ready (function ()
    {
    $ ('# A étendre »). Cliquez sur (function ()
    {
    $ ('Div # spoiler ") toggle ().
    $ Bascule ('Span.link') ().
    });
    });
  • La première ligne signifie que la fonction est chargé au début de votre page HTML et est prête donc.
  • Puis assignez votre lien ("a") avec l'ID "élargir" ("#expand") une fonction de clic à ("cliquez sur (function ()").
  • Les deux lignes restantes définissent les actions qui devraient se produire lorsque vous cliquez sur le lien, donc soit "Afficher les révélations" ou "Masquer les spoilers".
  • Le texte ".toggle ()" bedeuetet ce que l'élément est affichée disparaît ou alternée, en fonction de ce qui est actuellement activé.
  • Depuis la "spoiler" Div-Elemt est initialement caché, il est affiché, de sorte que le texte de spoiler apparaît.
  • Pendant le "lien" de l'élément de serrage ensuite passer deux actions: Tout d'abord, le texte affiché ("Show Aileron") est caché et d'autre part le texte masqué ("Cacher les spoilers") apparaît maintenant.
  • Lorsque vous revenez clic sur un lien, le contraire qui se passerait exactement: Le texte de spoiler disparaît, "Show Aileron" réapparaît et "Hidden Aileron" disparaît.
  • Le code complet serait donc pour votre section de tête:
  • Et pour votre région du corps:
    class = "lien"> de classe Afficher Aileron = "lien"> Cacher les spoilers
    Voilà le texte masqué.
MOTS-CLÉS: