Javascript 单击新按钮时如何关闭所有其他div？

我有一个有5个按钮的按钮组。我想在按钮的onclick事件中切换5个不同的div。单击按钮1打开/关闭分区1，单击按钮2打开/关闭分区2，依此类推。div只是这里的文本

第一次单击按钮-->显示div 第二次单击按钮-->隐藏div

但是，当我只单击一次按钮时，它的div显示，我单击另一个按钮，其他div堆叠在第一个div的顶部。如果我单击其按钮两次，我可以关闭第一个div，但我希望即使单击其他按钮，div也会关闭。我怎样才能做到这一点

到目前为止，我已经附上了JSFIDLE

我看到类似的问题贴了好几次，但似乎没有一个解决方案适合我。任何帮助都将不胜感激

函数切换div（id）{
var div=document.getElementById（id）；
div.style.display=div.style.display==“无”？“块”：“无”；
}

名单
地址表
电话列表#
职系表
学校名单
名字
地址
电话#
分数
学校

使用课堂将使这变得容易得多。可以选择具有活动类的图元并将其删除

函数切换div（id）{
var div=document.getElementById（id）；
document.queryselectoral（“.TableBody.active”）.forEach（函数（elem）{
if（elem！==div）elem.classList.remove（“活动”）；
});
//将类切换到单击的节。
div.classList.toggle（“活动”）；
}

.TableBody{
显示：无；
}
.TableBody.active{
显示：块；
}

名单
地址表
电话列表#
职系表
学校名单
名字
地址
电话#
分数
学校

使用课堂将使这变得容易得多。可以选择具有活动类的图元并将其删除

函数切换div（id）{
var div=document.getElementById（id）；
document.queryselectoral（“.TableBody.active”）.forEach（函数（elem）{
if（elem！==div）elem.classList.remove（“活动”）；
});
//将类切换到单击的节。
div.classList.toggle（“活动”）；
}

.TableBody{
显示：无；
}
.TableBody.active{
显示：块；
}

名单
地址表
电话列表#
职系表
学校名单
名字
地址
电话#
分数
学校

在所有分区中循环。如果是指定的DIV，则切换它，否则隐藏它

函数切换div（id）{
document.queryselectoral（“.TableBody”）.forEach（函数（div）{
if（div.id==id）{
//切换指定的DIV
div.style.display=div.style.display==“无”？“块”：“无”；
}否则{
//隐藏其他分区
div.style.display=“无”；
}
});
}

名单
地址表
电话列表#
职系表
学校名单
名字
地址
电话#
分数
学校

在所有分区中循环。如果是指定的DIV，则切换它，否则隐藏它

函数切换div（id）{
document.queryselectoral（“.TableBody”）.forEach（函数（div）{
if（div.id==id）{
//切换指定的DIV
div.style.display=div.style.display==“无”？“块”：“无”；
}否则{
//隐藏其他分区
div.style.display=“无”；
}
});
}

名单
地址表
电话列表#
职系表
学校名单
名字
地址
电话#
分数
学校

单击任何按钮时隐藏所有的

div

元素，然后只显示需要显示的元素

但是，稍微改变一下你的方法：

• 不要使用内联HTML事件属性，例如

  onclick

  。有 不要使用这个25岁以上的老技术 不会死
• 用于设置单个事件处理程序，但 根据单击的特定按钮作出反应
• 摆脱

  id

  s。使用

  id

  s会使代码变得脆弱，因为 需要不断更新代码以考虑新元素
• 不要使用内联样式--而是使用CSS类。这消除了 冗余代码，使覆盖应用的样式更容易

var clickedBtnIndex=null；
var shownDiv=null；
//将所有按钮和div放入数组：
let buttons=Array.prototype.slice.call（document.queryselectoral（“.roundBtns”）；
让divs=Array.prototype.slice.call（document.queryselectoral（“.TableBody”）；
//在按钮的父元素上设置一个单击事件处理程序
document.querySelector（“.btn组”）.addEventListener（“单击”，函数（evt）{
//evt.target是对触发事件的特定按钮的引用
clickedBtnIndex=buttons.indexOf（evt.target）；//获取其组中已单击按钮的索引
//如果单击了一个按钮
if（evt.target.classList.contains（“roundBtns”））{
//在沙发上打圈
divs.forEach（函数（div）{
//检查当前是否正在显示
如果（！div.classList.contains（“隐藏”））{
shownDiv=div；
}
});
hideAll（）；//隐藏所有div
//仅显示/隐藏已单击的内容
如果（divs[单击的btnindex]==shownDiv）{
divs[clickedBtnIndex].classList.add（“隐藏”）；
shownDiv=null；
}否则{
divs[clickedBtnIndex].classList.remove（“hidden”）；
}
//在单击的按钮组中存储对该按钮索引的引用
clickedBtnIndex=按钮.indexOf（evt.target）；
}
});
//这将隐藏所有div
函数hideAll（）{
//在阵列上循环
divs.forEach（函数（div）{
添加（“隐藏”）；//添加隐藏的类
});