根据点击的框切换 div单个页面中的多个 div

如何解决根据点击的框切换 div单个页面中的多个 div

我使用 isotope.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-->

我希望我的解释是清楚的。 期待您的支持！ 最好的祝福， 拉哈夫

解决方法

如果 (?) 我理解正确，您只是希望 toggle 基于被点击的超链接的多个 div 元素的可见性。而不是使用实际的 ID 属性，对于某些任务，使用 class 属性更容易~这里各种 ID vizContainer1、vizContainer2 等可以替换为单个类属性 {{1 }} 然后帮助我们识别我们希望处理的一整组元素。事实上，下面的代码不需要使用它来识别元素，因为我们对父节点感兴趣。

通过在外部分配 vizContainer，我们可以分离 HTML 和 javascript 并提供更多 event listener 事件处理程序。

请注意，在下面的 HTML 中，我将 generic 等添加到 DIV 元素中，这些元素仅用于切换，以便 DIV 元素可以显示某些内容（使用 CSS ）并且实际上不需要。此方法工作所需的 data-id=first 等属性ARE。

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

data-id=1

/*
    Initially select ALL hyperlinks that will be used to trigger
    the toggle effect of DIV elements. By using the class of the
    parent and using DOM selectors we can easily identify the
    nodes we want to use.
*/
document.querySelectorAll('ul.filtering-menu li a').forEach(a=>{
    a.addEventListener('click',e=>{
        // Stop the default action of the hyperlink
        e.preventDefault();
        // find the dataset ID attribute
        let i=Number( e.target.dataset.id );
        
        // find ALL divs that are to be toggled & set the visibility to none unless it's
        // data-id corresponds to that of the clicked hyperlink
        let col=document.querySelectorAll('div.filtering-content > div');
            col.forEach( div=>{
                div.style.display = Number( div.dataset.id )==i ? 'block' : 'none'
            });
    })
})

.vizContainer:after{content:attr(data-id);color:red;font-size:2rem}