IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher/Masquer du texte à partir d'un link


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Apprenti Informaticien
    Inscrit en
    Mars 2016
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Apprenti Informaticien

    Informations forums :
    Inscription : Mars 2016
    Messages : 8
    Points : 8
    Points
    8
    Par défaut Afficher/Masquer du texte à partir d'un link
    Bonjour à tous,

    J'aimerais pouvoir afficher du texte(qui est masqué en css), cela en cliquant sur un simple link(lien ou balise <a>).

    Mais le souci c'est que lorsque je clique sur le lien, le texte s'affiche pour quelques millièmes de secondes.

    html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <h2 class="link"><a href="" onclick="display('text');">Lien</a></h2>
     
    <div id="text">texte à afficher</div>
    css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #text {
     
        display: none;
     
    }
    javascript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function display(id) {
     
      if (document.getElementById("text").style.display=="none") {
     
        document.getElementById(id).style.display = "block";   
     
      }
     
      else {
     
        document.getElementById("text").style.display = "none";
     
      }
     
    }
    Merci d'avance pour votre aide

    Cordialement

  2. #2
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 578
    Points
    578
    Par défaut
    Bonsoir,

    Le lien pointe sur... rien?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="" onclick="display('text');">

  3. #3
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Ouais je crois que eleydet a mis le doigt sur le problème : en mettant href="#" cela fonctionne mais il y a un truc étrange : au premier clique la condition document.getElementById(id).style.display == "none" n'est pas vraie apparemment du coup le texte ne s'affiche pas la première fois mais après c'est bon...

    Ce problème est peut-être aussi lié à ce href="#", en tous cas en mettant le style dans la balise : <div id="text" style="display: none;">ça fonctionne dés le premier clique, tu peux tester ici :
    http://jsbin.com/gahikuxewu/edit?html,js,output

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    @Beginner : bien vu.

    La même chose dans une forme plus moderne. Noter la modification du style dans le code JS et le traitement de l'événement "click" (ev.preventDefault() ev.stopPropagation()) pour empêcher le rechargement de la page web à cause de l'attribut "href".

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        
      </style>
      <script>
        'use strict';
     
        document.addEventListener( 'DOMContentLoaded', function( ev ){
          
          document.querySelector( "#monTexte" ).style.display = "none";
          
        });
        
        window.addEventListener( 'load', function( ev ){
          
          function displayMonTexte(){
            const
              elemMonTexte = document.querySelector( "#monTexte" );
              
            if ( elemMonTexte.style.display === "none" ) { 
              elemMonTexte.style.display = "block";    
            } else {
              elemMonTexte.style.display = "none";
            }
          }
          
          document.querySelector( "h2.link > a" ).addEventListener( 'click', function( ev ){
            ev.preventDefault();
            ev.stopPropagation();
            
            displayMonTexte();
          });
          
        });
      </script>
    </head>
    <body>
      <main>
        <h2 class="link">
          <a href="">Lien</a>
        </h2>
        <div id="monTexte">
          <p>texte à afficher</p>
        </div>
      </main>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Merci c'est instructif...

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    J'aimerais pouvoir afficher du texte(qui est masqué en css), cela en cliquant sur un simple link(lien ou balise <a>).
    au départ ce n'est quand même pas le but des éléments <a>.

    Il existe l'élément <button> qui rempli tout à fait cette fonction, qui est « stylable » à souhait, et avec qui on n'a pas à se soucier de la propagation des événements.

    Avec HTML5 il est apparu l'élément <details> malheureusement pas encore bien pris en compte mais prometteur, il existe toutefois des polyFill.

    Enfin il existe une solution en pur CSS3 avec les pseudo-classe comme :checked, mais cela il faut surcharger le HTML.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2007] Afficher/masquer une Text ou listbox
    Par meumeu73.1 dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 25/09/2013, 10h04
  2. afficher masquer texte
    Par volver dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 23/06/2008, 12h23
  3. utiliser xslt pour afficher du texte à partir d'un fichier xml
    Par med_ellouze dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 23/08/2007, 15h52
  4. Afficher/masquer des zones de texte
    Par zaynabe dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 17/07/2007, 13h00
  5. [Form] Afficher/Masquer une zone de texte
    Par SpyesX dans le forum IHM
    Réponses: 14
    Dernier message: 01/12/2005, 02h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo