Javascript 根据单击的框切换div（单个页面中有多个div）

我使用同位素.js切换不同的div，数字控制在6到8之间，所以我使用了这个函数：

function toggleSix(id) {
var container1 = document.getElementById("first");
var container2 = document.getElementById("second");
var container3 = document.getElementById("third");
var container4 = document.getElementById("fourth");
var container5 = document.getElementById("fifth");
var container6 = document.getElementById("sixth");
if (id === 1) {
    container2.style.display = "none";
    container3.style.display = "none";
    container4.style.display = "none";
    container5.style.display = "none";
    container6.style.display = "none";
    container1.style.display = "block";
} else if (id === 2) {
    container1.style.display = "none";
    container3.style.display = "none";
    container4.style.display = "none";
    container5.style.display = "none";
    container6.style.display = "none";
    container2.style.display = "block";
} ...

我现在有一个页面，需要重复切换8个块，以在每个块/容器的8个不同div之间切换

因此，我需要每个容器顶部的每个选择器来表示一个div，下面是一组HTML代码：

<div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                  <ul class="filtering-menu text-center toggelable">
                    <li>
                      <a onclick="toggleSix(1)" class="active" href="#">TOTAL PER COLLEGE PER FACULTY</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(2)" href="#">TOTAL SPENDING COMPARISON</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(3)" href="#">FEES REQUESTS</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(4)" href="#">INCENTIVES REQUESTS</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(5)" href="#">FEES PER FACULTY MEMBER</a>
                    </li>
                    <li>
                      <a onclick="toggleSix(6)" href="#">INCENTIVES PER FACULTY MEMBER</a>
                    </li>
                  </ul><!--filtering-menu-->
                </div><!--end of sub-tabs col-lg-12 col-md-12 col-sm-12 col-xs-12-->
              </div><!--end of sub-tabs row-->
              <div class="row filtering-content">
                <!-- single-lab start -->
                <div id="first" class="col-md-12 col-sm-12 col-xs-12"  style="display:block;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer1" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="second" class="col-md-12 col-sm-12 col-xs-12"  style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer2" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="third" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer3" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="fourth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer4" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="fifth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer5" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
                <!-- single-lab start -->
                <div id="sixth" class="col-md-12 col-sm-12 col-xs-12" style="display:none;">
                  <h4 class="card-title"></h4>
                  <div id="vizContainer6" style="width: 100%; height:auto;"></div>
                </div><!--end of col-md-12-->
                <!-- single-lab end -->
              </div><!--row-->

我希望我的解释清楚。 期待您的支持！ 顺致敬意， Rahaf

如果（？）我理解正确，您只需根据单击的超链接切换许多div元素的可见性。对于某些任务，不使用实际的ID属性，更容易使用

类

属性~这里各种ID

vizContainer1

，

vizContainer2

等可以替换为单个类属性

vizContainer

，这有助于我们识别希望处理的整个元素组。事实上，下面的代码不需要使用它来标识元素，因为我们对父节点感兴趣

通过在外部分配

事件监听器

，我们可以将HTML和javascript解耦，并提供更通用的

事件处理程序

请注意，在下面的HTML中，我添加了
data id=first
etc到DIV元素中，这些元素仅用于切换，以便DIV元素可以显示一些内容（使用CSS），而不是实际需要的内容。此方法需要
data id=1
etc属性

下面的内容可以很容易地容纳任意数量的DIV元素进行切换（在合理的范围内），所以我希望这能有所帮助


/*
最初选择将用于触发的所有超链接
DIV元素的切换效果。通过使用
父对象和使用DOM选择器，我们可以轻松识别
我们想要使用的节点。
*/
document.querySelectorAll（'ul.filtering-menu li a'）.forEach（a=>{
a、 addEventListener（'click'，e=>{
//停止超链接的默认操作
e、 预防默认值（）；
//查找数据集ID属性
设i=编号（e.target.dataset.id）；
//查找所有要切换的div并将可见性设置为none，除非
//数据id与单击的超链接的数据id相对应
让col=document.queryselectoral（'div.filtering-content>div'）；
col.forEach（div=>{
div.style.display=Number（div.dataset.id）==i？'block'：'none'
});
})
})
.vizContainer:after{content:attr（数据id）；颜色：红色；字体大小：2rem}



















从解释上看不太清楚，但只要看看这个函数
toggleSix
我就会说，肯定有更好的方法来实现这一点。我已经尽我所能把它弄清楚了。对于函数，我仍然是一个学习者，并尽我所能优化它。如果您有更好的解决方法，请告知。感谢。下面的代码有用吗？感谢您的支持！它工作完美，无需长切换功能，我有。非常感谢。