Partage
  • Partager sur Facebook
  • Partager sur Twitter

Effectuer une modification "after" a un boutton

    1 juillet 2022 à 14:17:19

    Bonjour,

    Je code un site et j'ai envie de faire une tab pour voir le menu. Quand l'utilisateur clique sur par exemple sur sandwiches il y'a un trait juste en dessous mais la quand je fais sa, sa effectuer la modification a tout les autre bouton.

    Je pense que l'image expliqueras mieux que moi 

    code html :

    <div class="tab">
                    <button class="tablinks" onclick="openCity(event, 'Burgers')">Burgers</button>
                    <button class="tablinks" onclick="openCity(event, 'Sandwiches')">Sandwiches</button>
                    <button class="tablinks" onclick="openCity(event, 'Desserts')">Desserts</button>
                    <button class="tablinks" onclick="openCity(event, 'Boissons')">Boissons</button>
                    <button class="tablinks" onclick="openCity(event, 'Menu-enfants')">Menu enfants</button>
                    <button class="tablinks" onclick="openCity(event, 'Accompagnement')">Accompagnement</button>
    
                  </div>
                  
                  <!-- Tab content -->
                  <div id="Burgers" class="tabcontent">
                    <h3>Burgers</h3>
                    <p>Menu des burgers</p>
                  </div>
                  
                  <div id="Sandwiches" class="tabcontent">
                    <h3>Sandwiches</h3>
                    <p>Menu des sandwiches.</p>
                  </div>
                  
                  <div id="Desserts" class="tabcontent">
                    <h3>Desserts</h3>
                    <p>Menu des desserts</p>
                  </div>
                  <div id="Boissons" class="tabcontent">
                    <h3>Boissons</h3>
                    <p>Menu des boissons</p>
                  </div>
                  
                  <div id="Menu-enfants" class="tabcontent">
                    <h3>Menu enfants</h3>
                    <p>Menu enfants</p>
                  </div>
                  
                  <div id="Accompagnement" class="tabcontent">
                    <h3>Accompagnement</h3>
                    <p>Menu des accompagnements</p>
                  </div>

    code css :

    .tab {
        align-items: center;
        text-align: center;
        width: max-content;
        overflow: hidden;
        border: none;
        background-color: transparent;
      }
      
      .tablinks {
        background-color: transparent;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-family: 'Rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        color: black;
        cursor: pointer;
      }
      
      #btn-burg::after{
        content: "";
        position: absolute;
        width: 0%;
        height: 5px;
        bottom: -20%;
        left: -3%;
        background-color: #FF9900;
      }
      #btn-burg.active::after {
        width: 100%;
      }
      .tablinks.active {
        color: #FF9900;
      }
      .tabcontent {
        display: none;
        padding: 6px 12px;
        border: none;
        border-top: none;
      }
      .tabcontent {
        animation: fadeEffect 0.8s;
      }
      
      @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
      }




    -
    Edité par xiaomi1 1 juillet 2022 à 14:20:35

    • Partager sur Facebook
    • Partager sur Twitter
      1 juillet 2022 à 15:12:39

      Bonjour,

      pour pouvoir reproduire le comportement, il nous manque le JS, où est définie la méthode openCity.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        1 juillet 2022 à 15:24:50

        oui j'ai le js, il marche bien(il affiche se que je lui demande quand je clique) mais le probleme vient du css
        • Partager sur Facebook
        • Partager sur Twitter
          1 juillet 2022 à 16:29:59

          Il *nous* manque le JS. Si tu veux qu'on se mette dans le même état afin de voir ce qui ne va pas, montre-nous le JS, s'il te plaît.
          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            1 juillet 2022 à 19:40:37

            ok, j'ai juste fait une modification dans le html et js j'ai mis onclick="openMenu(event, 'item')" au lieu de openCity

            • Partager sur Facebook
            • Partager sur Twitter
              1 juillet 2022 à 21:04:57

              On ne voit pas non plus la méthode openMenu. Aide-nous à t'aider ! Montre-nous de quoi reproduire ton code afin de trouver ce qui ne va pas.
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                2 juillet 2022 à 11:53:16

                desoler sa avait buger javais envoyer , mais c'est bon j'ai trouver une solution j'ai mis un border-bottom quand on clique.

                Merci

                js : 

                function openMenu(evt, tabMenu) {
                    var i, tabcontent, tablinks;
                  
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                      tabcontent[i].style.display = "none";
                    }
                  
                    tablinks = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablinks.length; i++) {
                      tablinks[i].className = tablinks[i].className.replace(" active", "");
                    }
                  
                    document.getElementById(tabMenu).style.display = "block";
                    evt.currentTarget.className += " active";
                  }
                • Partager sur Facebook
                • Partager sur Twitter

                Effectuer une modification "after" a un boutton

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown