Javascript 如何防止两个div在单击任一按钮时同时切换内容

我有一个工作代码，但我面临的问题是，当您单击第一个按钮和第二个按钮时，两者都将显示内容。我不希望按钮同时处于活动状态。我希望当一个按钮显示时，另一个按钮应该自动隐藏它的内容。后一个单击的按钮应优先切换前一个按钮以隐藏

$（“按钮”）。单击（函数（）{
$（“p.”+this.className）.toggle（“slow”）；
});
p{
背景：爸爸；
字体大小：粗体；
字体大小：16px；
}

切换1
切换2
你好

如此有趣的文本，嗯？
您可以通过使用隐藏和显示功能来实现这一点，只需修改代码即可


var isButtonClicked=[]
$（文档）.ready（函数（）{
$（“p”）.hide（）；
$（“按钮”）。单击（函数（）{
var currentClass=$（this.attr（“类”）；
if（$.inArray（currentClass，isButtonClicked）=-1）
{
$（“p”）。隐藏（“慢”）；
$（“p.”+currentClass）.show（“slow”）；
isButtonClicked.push（当前类）；
}
否则{
警报（“第二次单击”）
$（this.hide（））
}
})
})

切换演示
p{
背景：爸爸；
字体大小：粗体；
字体大小：16px；
}
切换1
切换2
你好

这么有趣的文本，是吗
只需在显示前隐藏您的
p


$（“按钮”）。单击（函数（）{
$（“p”）.hide（）；
$（“p.”+this.className）.toggle（“slow”）；
});
p{
显示：无；
}

切换演示
p{
背景：爸爸；
字体大小：粗体；
字体大小：16px；
}
切换1
切换2
你好

这么有趣的文本，是吗
试试这个：-


$（“按钮”）。单击（函数（）{
$（（p[class*=toggle]：不是（p.“+this.className+”））.hide（）；
$（“p.”+this.className）.toggle（“slow”）；
});

p[class*=切换]{显示：无}
p{
背景：爸爸；
字体大小：粗体；
字体大小：16px；
}
切换1
切换2
切换3
你好

这么有趣的文本，是吗
另一个
$（[p[class*=toggle]：不是（p.“+this.className+”）.hide（）；
$（“按钮”）。单击（函数（）{
$（（p[class*=toggle]：不是（p.“+this.className+”））.hide（）；
$（“p.”+this.className）.toggle（“slow”）；
});
p{
背景：爸爸；
字体大小：粗体；
字体大小：16px；
}

切换1
切换2
你好

如此有趣的文本，嗯？
谢谢。是否有一种方法可以添加一个隐藏所有其他类似的内容，以便只显示当前单击的按钮内容。@maryongubo answer Modified感谢您的回答。我仍然希望在第二次单击同一按钮时隐藏内容。这在您添加的其他工作代码中已消失。如果再次单击某个按钮，是否要隐藏该按钮？谢谢@Ahmed，但我如何保持在再次单击同一按钮时隐藏该内容？