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

Question

我正在使用 isotope.js 来切换不同的 divs，数字在 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 个块以在每个 block/container.

大约 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-->

Answer 1

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

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

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

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

/*
    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}

<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 data-id=1 class='active' href='#'>TOTAL PER COLLEGE PER FACULTY</a>
        </li>
        <li>
          <a data-id=2 href='#'>TOTAL SPENDING COMPARISON</a>
        </li>
        <li>
          <a data-id=3 href='#'>FEES REQUESTS</a>
        </li>
        <li>
          <a data-id=4 href='#'>INCENTIVES REQUESTS</a>
        </li>
        <li>
          <a data-id=5 href='#'>FEES PER FACULTY MEMBER</a>
        </li>
        <li>
          <a data-id=6 href='#'>INCENTIVES PER FACULTY MEMBER</a>
        </li>
        
        <li>
          <a data-id=7 href='#'>Another link - #7</a>
        </li>
        <li>
          <a data-id=8 href='#'>Another link - #8</a>
        </li>
      </ul>
    </div>
</div>
<div class='row filtering-content'>

    <div data-id=1 id='first' class='col-md-12 col-sm-12 col-xs-12' style='display:block;'>
      <h4 class='card-title'></h4>
      <div data-id='first' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=2 id='second' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='second' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=3 id='third' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='third' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=4 id='fourth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fourth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=5 id='fifth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fifth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=6 id='sixth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='sixth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    
    <div data-id=7 id='seventh' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='seventh' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=8 id='eighth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='eighth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
</div>

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

Toggling a div based on the clicked box (multiple divs in a single page)

html

javascript

jquery

jquery-isotope