单击按钮时隐藏/显示多个项目

Question

我有 3 个按钮，ID 为 'btn1' 'btn2' 'btn3'，我希望每个按钮都隐藏一些元素：每个元素的 ID 为 'sect1' 'sect2' ... 'sect3'，并属于类 'hidden'。由于某种原因，我的代码不起作用。第一个按钮完全搞砸了，第二个和第三个按钮只显示分配给它们的元素之一。我的代码是这样的：

var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1",this);

toggleDivs("sect2",this);

toggleDivs("sect3",this);

toggleDivs("sect4",this);
};

btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect5",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect6",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect7",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect8",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect9",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect10",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect11",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect12",this);
};

function toggleDivs(s,btn){

if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById("sect5").classList.remove("shown");
document.getElementById("sect6").classList.remove("shown");
document.getElementById("sect7").classList.remove("shown");
document.getElementById("sect8").classList.remove("shown");
document.getElementById("sect9").classList.remove("shown");
document.getElementById("sect10").classList.remove("shown");
document.getElementById("sect11").classList.remove("shown");
document.getElementById("sect12").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}

}

//force button1 state initialise, if required
btn1.focus();
btn1.click();
</script>
<style>

.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
animation: fade_in_anim 0.5s;
}
.btn_active_state{
background-color: #FFCC00 !important;
}

@keyframes fade_in_anim {
0% {
opacity: 0;
transform: translateY(-30px);
}

100% {
opacity: 1;
transform: translateY(0px);
}
}

</style>```

Answer 1

您可以映射按钮和部分：

const buttons = [...document.querySelectorAll("[id^='btn']")]
const mapping = [[0, 4], [4, 8], [8,12]]
const sections = [...document.querySelectorAll("[id^='sect']")]

for(let i = 0; i < 3; i++) {
  buttons[i].addEventListener('click', function(event) {
    event.preventDefault();
    toggleDivs(this)
    for(let j = mapping[i][0]; j < mapping[i][1]; j++) {
      sections[j].classList.add("shown", "fade")
    }
  })
}

function toggleDivs(btn){
  buttons.forEach(b => b.classList.remove("btn_active_state"))
  btn.classList.add("btn_active_state")
  sections.forEach(s => s.classList.remove('shown'))
}

//force button1 state initialise, if required
btn1.focus();
btn1.click();

.shown{
  display: block !important;
  animation: fade_in_anim 0.5s;
}
.btn_active_state{
  background-color: #FFCC00 !important;
}
@keyframes fade_in_anim {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
[id^='sect'] {
  display: none;
}

<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<div id="sect1">sect1</div>
<div id="sect2">sect2</div>
<div id="sect3">sect3</div>
<div id="sect4">sect4</div>
<div id="sect5">sect5</div>
<div id="sect6">sect6</div>
<div id="sect7">sect7</div>
<div id="sect8">sect8</div>
<div id="sect9">sect9</div>
<div id="sect10">sect10</div>
<div id="sect11">sect11</div>
<div id="sect12">sect12</div>