javascript - 我们可以使用相同的按钮来隐藏/显示多个 div

Question

我有 3 个 anchor 标记按钮和 6 个 div，我想为每个按钮分配 2 个 div，当单击时，两个分配的 div 应该相应地显示/隐藏。

我能够使用下面的代码隐藏/显示前 3 个 div，但是对于接下来的 3 个 div(图像部分)我的代码不起作用

html:

//button section
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

js:

function show(elementId) { 
    document.getElementById("id1").style.display="none";
    document.getElementById("id2").style.display="none";
    document.getElementById("id3").style.display="none";
    document.getElementById(elementId).style.display="block";
}

点击指定按钮时显示/隐藏两个 div 的任何替代方法？

Answer 1

您两次使用相同的 id。这是不允许的。我已经更改了您的 HTML 以更正此问题。我希望这会有所帮助。

function show(elementId) { 
   let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));
   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));
   divs.forEach(d=>{d.style.display="none"})
   imgs.forEach(i=>{i.style.display="none"})
   document.getElementById("d"+elementId).style.display="block";
   document.getElementById("i"+elementId).style.display="block";
    }

<div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget1</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget2</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget3</a></div>
   </div>
<!--1st 3 divs-->
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="did1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

<!--next 3 divs(image section)-->
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="iid1"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>
      <div class="mx-2" id="iid2" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>
      <div class="mx-2" id="iid3" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>
   </div>
</div>