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

Bonjour,

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

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

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";
  }