Javascript 单击另一个元素时隐藏一个元素

当我单击第一个链接时，它将

#foto

高度设置为

200px

。如果我单击第二个链接，它会将

#foto1

高度设置为

200px

我想要的是当点击第二个链接时，将

#foto

高度设置为

0px

，反之亦然。有什么帮助吗

函数版本（fotox，texto1）{
var x=document.getElementById（fotox）；
x、 style.height='200px'；
x、 innerHTML=texto1；
}

.link{
填充：10px
}
#福托，
#foto1{
背景颜色：橙色；
边缘顶部：20px；
高度：0px；
溢出：隐藏
}

第一部分
第2部分

您可以设置要切换到类中的所有元素。我在下面的代码片段中将它们设置为linkDiv，并相应地进行切换。因此，如果要添加要隐藏和显示的新元素，可以添加它们。只需向其中添加一个类linkDiv

函数版本（fotox，texto1）{
var x=document.getElementById（fotox）；
如果（x.style.height==“x.style.height==”0px”）
x、 style.height='200px'；
其他的
x、 样式。高度='0px'；
x、 innerHTML=texto1；
var元素=document.getElementsByClassName（'linkDiv'）；
对于（var i=0；i，可以按以下方式在函数中使用4个参数：


函数版本（fotox1、fotox2、texto1、texto2）{
var x=document.getElementById（fotox1）；
x、 style.height='200px'；
x、 innerHTML=texto1；
var y=document.getElementById（fotox2）；
y、 style.height='0px'；
y、 innerHTML=texto2；
}
.link{
填充：10px
}
#福托，
#foto1{
背景颜色：橙色；
边缘顶部：20px；
高度：0px；
溢出：隐藏
}

第一部分
下面的第2部分是一个代码片段。此代码简洁，使用基于类的样式而不是内联样式。类是最佳实践


函数版本（fotox，texto1）{
var collection=document.getElementsByClassName（“链接”）
var array=array.prototype.slice.call（集合，0）；
forEach（函数（currentValue、索引、数组）{
currentValue.className='link'；
});
var x=document.getElementById（fotox）；
x、 className='链接活动'；
x、 innerHTML=texto1；
}
#foto，
#foto1{
背景颜色：橙色；
边缘顶部：20px；
}
.链接{
填充：10px；
高度：0px；
溢出：隐藏；
}
.link.active{
填充：10px；
高度：200px；
溢出：隐藏；
}

第一部分
第2部分
您不能只在ver函数中添加一个height参数吗？切换一个类并保留它simple@epascarello是的。请参阅我的答案，了解一个简单的js代码段。jQuery$.toggleClass（）也是一个不错的选择。如果下面的答案之一回答了您的问题，即此网站的工作方式，您将“接受”答案，这里更多：谢谢，这很有效！如何在第二次点击时关闭所有？第二次点击什么？你能更具体一点吗？你的意思是如果你第二次点击任何链接，所有的div都应该关闭吗？干得好。现在我将试着分析你的脚本，找出它是如何工作的，以便我可以从中学习。非常感谢！当然，同样在上面的示例中，您有两个链接。您可以添加任意数量的链接。请记住向其中添加类linkDiv。