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属性，因此所有div都不为空，因此if条件都不成功。您需要使用getComputedStyle才能在CSS中合并。

您还应该使用else if，因为这三个条件是互斥的。

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>

用于切换分区可见性的Js脚本不起作用

2 个答案: