我有 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 的任何替代方法？
最佳答案
您两次使用相同的 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>关于javascript - 我们可以使用相同的按钮来隐藏/显示多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53977666/