时间戳

首页 > 解决方案 > 用于切换部门可见性的 Js 脚本不起作用

javascript - 用于切换部门可见性的 Js 脚本不起作用

问题描述

所以这是我的功能。我在一个部分中有 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>

标签： javascripthtmlcss

解决方案

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>

推荐阅读