C'est donc ma fonction. J'ai 3 boutons dans une section et je veux qu'ils changent de division au clic. J'ai d'abord essayé la fonction jQuery mais cela n'a pas fonctionné pour moi que j'ai essayé d'y parvenir avec cette fonction mais quelque chose ne va probablement pas, pourriez-vous me dire pourquoi ?

Voici le code:

function toggle_visibility(id) {
  document.querySelectorAll(".clients").forEach(function(client) {
    client.style.display = 'none';
  });
  document.querySelector("#" + id).style.display = 'block';
}
.clients1 {
  transition: 0.5s;
}

.clients2 {
  display: none;
  transition: 0.5s;
}

.clients3 {
  display: none;
  transition: 0.5s;
}
 <div class="clients" id="clients">
        <div class="row justify-content-center">
            <div class="">
                <img src="images/img4-pad.png" alt="">
            </div>
            <div class="clients-img-character ">
                <img src="images/img5-character.png" alt="">
            </div>
            <div class="col-4 text-left clients1" id="clients1">
                <h1>aaaaaaaaaaaa</h1>
                <p>aaaaaaaaaaaaaaa</p>
                <p>aaaaaaaaaaaa<a>aaaaaaaaaaaa</a></p>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
            </div>
            <div class="col-4 text-left clients2" id="clients2">
                <h1>aaaaaaaaaaaa</h1>
                <p>bbbbbbbbbbbbbbbbbbb</p>
                <p>aaaaaaaaaaaa<a>aaaaaaaaaaaa</a></p>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
            </div>
            <div class="col-4 text-left clients3" id="clients3">
                <h1>aaaaaaaaaaaa</h1>
                <p>cccccccccccccccccccccccccc</p>
                <p>aaaaaaaaaaaa<a>aaaaaaaaaaaa</a></p>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
                <span>aaaaaaaaaaa</span>
            </div>
        </div>
        <div class="row justify-content-center">
            <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons1"></button>
            <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons2"></button>
            <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons3"></button>
        </div>
    </div>
0
Buszek 17 mars 2019 à 20:43

2 réponses

Meilleure réponse
function toggle_visibility(id) {
  document.querySelectorAll(".client").forEach(function(client) {
    client.style.display = 'none';
  });
  document.querySelector("#" + id).style.display = 'block';
}
#clients1 {
  transition: 0.5s;
}

#clients2 {
  display: none;
  transition: 0.5s;
}

#clients3 {
  display: none;
  transition: 0.5s;
}
<div class="col-4 text-left client" id="clients1">
  <h1>aaaa</h1>
  <p>aaaaa</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="col-4 text-left client" id="clients2">
  <h1>aaaa</h1>
  <p>bbbbbbbbbb</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="col-4 text-left client" id="clients3">
  <h1>aaaa</h1>
  <p>ccccccccc</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="row justify-content-center">
  <button class="clients-buttons" onclick="toggle_visibility('clients1')" id="clients-buttons1"></button>
  <button class="clients-buttons" onclick="toggle_visibility('clients2')" id="clients-buttons2"></button>
  <button class="clients-buttons" onclick="toggle_visibility('clients3')" id="clients-buttons3"></button>
</div>
1
ponury-kostek 17 mars 2019 à 19:33

xxx.style.display n'obtient pas le style de CSS, il n'obtient que le style en ligne. Étant donné qu'aucun des div n'a d'attributs style, celui-ci est vide pour tous, donc aucune des conditions if ne réussit. Vous devez utiliser getComputedStyle pour fusionner en CSS.

Vous devez également utiliser else if, car les 3 conditions s'excluent mutuellement.

function toggle_visibility() {
  var clients1 = document.getElementById("clients1");
  var display1 = getComputedStyle(clients1).getPropertyValue("display");
  var clients2 = document.getElementById("clients2");
  var display2 = getComputedStyle(clients2).getPropertyValue("display");
  var clients3 = document.getElementById("clients3");
  var display3 = getComputedStyle(clients3).getPropertyValue("display");
console.log(display1, display2, display3);
  if (display1 == 'none' && display3 == 'none') {
    clients2.style.display = 'block';
  }
  else if (display1 == 'none' && diplay2 == 'none') {
    clients3.style.display = 'block';
  }
  else if (display2 == 'none' && display3 == 'none') {
    clients1.style.display = 'block';
  }
}
.clients1 {
  transition: 0.5s;
}

.clients2 {
  display: none;
  transition: 0.5s;
}

.clients3 {
  display: none;
  transition: 0.5s;
}
<div class="col-4 text-left clients1" id="clients1">
  <h1>aaaa</h1>
  <p>aaaaa</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="col-4 text-left clients2" id="clients2">
  <h1>aaaa</h1>
  <p>bbbbbbbbbb</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="col-4 text-left clients3" id="clients3">
  <h1>aaaa</h1>
  <p>ccccccccc</p>
  <p>aaaaa<a>aaaaaa</a></p>
  <span>aaaaa</span>
  <span>aaaaaa</span>
  <span>aaaaa</span>
</div>
<div class="row justify-content-center">
  <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons1"></button>
  <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons2"></button>
  <button class="clients-buttons" onclick="toggle_visibility()" id="clients-buttons3"></button>
</div>
0
Barmar 17 mars 2019 à 18:02