html里面两个同级元素默认第二个元素不显示也不占据空间第一个元素点击的时候第二个元素占据空间并显示不使用display:none和visibility以及position
可以使用opacity属性。将第二个元素的opacity设为0,即完全透明,这样该元素不会显示但仍占据空间。当第一个元素被点击时,将第二个元素的opacity设置为1,即不透明,这样第二个元素将显示并占据空间。可以使用JavaScript来实现这个效果。以下是一个示例代码:
HTML代码:
<div id="element1" onclick="showElement2()">Element 1</div>
<div id="element2">Element 2</div>
CSS代码:
#element1 {
cursor: pointer;
}
#element2 {
opacity: 0;
}
JavaScript代码:
function showElement2() {
var element2 = document.getElementById("element2");
element2.style.opacity = 1;
}
原文地址: http://www.cveoy.top/t/topic/bGmD 著作权归作者所有。请勿转载和采集!