JS脚本可在分区上切换可见性不起作用

Question

，所以这是我的功能。我在一个部分中有3个按钮，我希望他们在单击时更改分区。首先，我尝试了jQuery函数，但对我来说并不适用于我试图通过此功能实现这一目标，但可能有问题，您能告诉我为什么吗？

这是代码：

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>

Answer 1

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>

Answer 2

xxx.style.display无法从CSS获得样式，它只会获得内联样式。由于所有DIV都没有style属性，因此所有这些属性都是空的，因此if条件都没有成功。您需要使用getComputedStyle在CSS中合并。

您也应该使用else if，因为这3个条件是相互排斥的。

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>