在单击按钮时隐藏div元素,并用另一个div替换它,而不使用jQuery,可以通过纯JavaScript来实现。
首先,在HTML中定义两个div元素,一个是要隐藏的div,另一个是要替换的div。给按钮添加一个点击事件,当按钮被点击时,隐藏div元素并显示替换的div元素。
HTML代码示例:
<div id="divToHide">要隐藏的内容</div>
<div id="divToReplace" style="display: none;">要替换的内容</div>
<button onclick="replaceDiv()">点击按钮</button>
然后,在JavaScript中编写替换div的函数replaceDiv(),该函数将隐藏要隐藏的div元素并显示要替换的div元素。
JavaScript代码示例:
function replaceDiv() {
var divToHide = document.getElementById("divToHide");
var divToReplace = document.getElementById("divToReplace");
divToHide.style.display = "none";
divToReplace.style.display = "block";
}
以上代码中,通过getElementById()方法获取要隐藏的div元素和要替换的div元素,并分别赋值给变量divToHide和divToReplace。然后,通过修改元素的style.display属性,将要隐藏的div元素设置为"display: none;",将要替换的div元素设置为"display: block;",实现隐藏和显示的效果。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云