js怎么让已经显示的div,在其他点击事件触发的时候隐藏起来

做了一个内容,一个大的div包含p标签和div,现在想要利用js实现动态效果,已实现点击p标签时,隐藏在下方的div内容可以显示出来,求如何实现在点击其他的p标签时,打开新的div内容时,已经显示的div能够重新隐藏起来!

这个是源代码,可以实现你的功能,有不懂的可以问我,希望采纳,谢谢

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oP=oDiv.getElementsByTagName("p");
var aDiv=oDiv.getElementsByTagName("div");
for(i=0;i<oP.length;i++)
{
oP[i].index=i;
//alert(oP.length);
oP[i].onclick=function()
{
for(j=0;j<aDiv.length;j++)
{
aDiv[j].style.display="none";
}
//alert(this.index);
aDiv[this.index].style.display="block";
}
}
}
</script>
<style>
.hidediv{
display:none;
height:100px;
width:100px;
background:#CF3;
}
</style>
</head>

<body>
<div id="div1">
<p>第一个div</p>
    <div class="hidediv">gerg </div>
    <p>第2个div</p>
    <div class="hidediv">wgw </div>
    <p>第3个div</p>
    <div class="hidediv">ggt </div>
    <p>第4个div</p>
    <div class="hidediv"> tgt</div>
</div>
</body>
</html>

温馨提示:内容为网友见解,仅供参考
无其他回答