Cliquer sur un bouton pour faire apparaitre un paragraphe/image [Résolu]

Réponse 2 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tiens... voici le code corrigé et grandement amélioré/complété

<html> 
<head>
  <title>TEST</title>
  <meta charset="utf8">
  <style>
  button.btnmateriel{
    font-size: 1.5em;
    padding: 5px;
  }
  
  .onglet{
    display:none;
    width:100%;
    min-height:60px;
    padding:10px;
    margin :5px;
    border : 1px solid black;
  }
  
  .active{
    background-color : green;
  }
  </style>
 </head>
 <body>
 
  <section class="boutique">
    <p>
      <button class="btnmateriel active" id="btn_1" data-onglet="1" > materiel dessin papier </button>
      <button class="btnmateriel" id="btn_2" data-onglet="2" > materiel dessin tablette </button>
    </p>       
    
    <div class="div_onglets">
    <div id="onglet_1" class="onglet">
      <p>
       Ceci est l'onglet N° 1
      </p>
    </div>
    
     <div id="onglet_2" class="onglet">
      <p>
       Ceci est l'onglet N° 2
      </p>
    </div>    
    </div>

  </section>
 <script type="text/javascript">

  function hideAllElementByClassNam(clName){ 
    var onglets = document.getElementsByClassName("onglet");
    //on masque tous les onglets
    for (var i = 0; i < onglets.length; i++) {
      onglets[i].style.display = 'none';
    }
  }
  
  function ShowElementById(idElm){
    document.getElementById(idElm).style.display = "inline-block";
  }
  
  function addClassActiveElm(idElm){
    var cl_btn_active = document.getElementsByClassName("active");
    //on retire la class Active de tous les onglets
    for (var i = 0; i < cl_btn_active.length; i++) {
      removeClass(cl_btn_active[i],"active") ;
    }  
    //on met la class active au bouton cliqué
    document.getElementById(idElm).className = "btnmateriel active";
    
  }
  
  function removeClass(e,c) {
    e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
  }
  
  var DisplayHideOnglets = function() {
      //on masque tous les onglets
      hideAllElementByClassNam('onglet');
      
      //numero de l'onglet à afficher
     var NumOnglet = this.getAttribute("data-onglet");  
      
      //on affiche l'onglet
      if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
        ShowElementById("onglet_"+NumOnglet);
        addClassActiveElm("btn_"+NumOnglet);
      }
      
    
  };
  
  function initListener(){
    //on ajoute le listener
    var cl_btnmateriel = document.getElementsByClassName("btnmateriel");
    for (var i = 0; i < cl_btnmateriel.length; i++) {
      cl_btnmateriel[i].addEventListener('click', DisplayHideOnglets, false);
    }
  }
  
  //Initialisation
  initListener();
  
  //par défaut.. on affiche le premier onglet
  ShowElementById("onglet_1");
    
 </script>
 
 </body>

</html>

Cordialement,
Jordane

nass6906 Messages postés 30 Date d'inscription Statut Membre Dernière intervention

Bonjour,
J'ai une question, en fait je suis un peu dans le même cas, en gros j'ai deux boutons AllumeLED0/EteindreLED0, ils sont bien indépendant et ils fonctionnent bien sauf que je doit rajouter une fonctionnalité qui du genre: quand je clique allumer, elle allume la LED et qu'elle m'affiche une image qui montre qu'elle est bien allumer, je n'arrive a gérer ça.
si vous pouviez m'aider ça sera gentil de votre part. merci
Bonne journée

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Merci d'ouvrir ta propre discussion.
Ca sera plus simple à suivre.
Pense a y mettre ton code.

nass6906 Messages postés 30 Date d'inscription Statut Membre Dernière intervention

Comment put-on faire pour que par défaut il affiche aucun onglet et juste en cliquant ça va l’afficher ?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Tu mets en commentaire la ligne 102

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

105 pardon.

Réponse 3 / 6

clementcookie45 Messages postés 142 Date d'inscription Statut Membre Dernière intervention 24

Je suis pas un pro mais je pense que ça doit pouvoir se faire en JavaScript

Utilisateur anonyme

Oui c'est aussi ce que je pensais, sauf que JavaScript j'en ai fait très peu (et j'ai beaucoup de mal ^^) et en css impossible de trouver une solution

clementcookie45 Messages postés 142 Date d'inscription Statut Membre Dernière intervention 24 > Utilisateur anonyme

Css je pense pas regarde sur internet si il y a pas des lignes de codes toute faites

Réponse 4 / 6

Valentinbnd Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Bonjour merci pour votre réponse
j'ai essayé d'avancer mais je n'y arrive pas, voici ce que j'ai fait :

HTML


<section class="boutique">
            <p>
<button class="btnmateriel">materiel dessin papier</button>
<button class="btnmateriel">materiel dessin tablette</button>
</p>       
            <p> BONJOUR </p>
            <p id="materieltxt"> AUREVOIR </p>
            
            
            <script type="boutton" src="js/java.js"></script>
        </section>

CSS

button.btnmateriel{
  font-size: 1.5em;
  padding: 5px;
}

JS

var btn = document.querySelectorAll(".btnmateriel");

btn[0].addEventListener("click", function () {
   document.getElementById("materieltxt").style.display = "none";
}, false);

btn[1].addEventListener("click", function () {
  document.getElementById("materieltxt").style.display = "block";
}, false);

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

ThEBiShOp Messages postés 8411 Date d'inscription Statut Contributeur Dernière intervention 1 566

Salut,

suivant l'avancement de ton site, mon conseil serait d'utiliser un framework CSS tel que bootstrap. Ces fonctionnalités pour masquer un paragraphe sont déjà prévues, tu n'as quasiment rien à faire et c'est d'une aide précieuse pour mettre en page ton code HTML.

Le soucis c'est que si tu as déjà fait beaucoup de CSS toi même, tu risques de devoir laisser de côté une partie de ce que tu as déjà fait.

Si tu arrives à t'en sortir, tant mieux, mais je te conseillerais pour un prochain projet de te pencher sur cette solution qui facilite énormément la vie !

Réponse 6 / 6

Valentinbnd Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Merci beaucoup Jordane, je regarde ça de suite

TheBiShop, notre prof nous a inerdit d'utiliser ces choses là ^^

ThEBiShOp Messages postés 8411 Date d'inscription Statut Contributeur Dernière intervention 1 566

Ahah, c'est pour les cours, ok.

Bah c'est certain qu'il faut comprendre le CSS avant d'utiliser des outils pour te faciliter la vie.
Si tu fais un projet perso, essaie de regarder comment ça fonctionne, entre les framework PHP et les framework CSS, c'est vraiment magique, le jour où je m'y suis mis, j'ai redécouvert la joie de développer, vraiment.

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

6 réponses

Votre réponse

Discussions similaires